依据vue-cli 搭建一个 vue3.0 的项目

通过这个命令

// vue create 项目名称 
vue create muzi

然后通过 npm 命令,把项目启动

npm run serve

查看项目启动成功，不成功找找原因。

npm run serve 是如何启动

要完全解释这个问题，需要另外一片文章，这里主要围绕vue3.0环境变量。那么在vue这个项目中，发生了什么事情？

打开项目的 package.json：找到如下代码

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

npm run serve 会找到 package.json 然后执行上面这段代码，在依据 serve 执行vue-cli-service serve 这个命令，而 vue-cli-service serve 这个是脚手架集合的一开发服务器，因此在本地就可以运行我们的项目

注当然这里我是用vue-cli来举例，这里可以配置其他的webpack也是可以的

现在有一个需求，开发环境需要启动一个代理服务请求，调试后端开发同事的接口，而生产环境不需要；也就是说，开发环境的配置代码和生产环境不一样，那么该怎么做？

逻辑

按照代码的书写逻辑，应该有一个判断比如：

 if(开发环境){
    ...
    执行开发环境的.config.js
 }else{
  ....
  执行生产环境的.config.js
 }

此时，就可以在相关配置里面各自书写不一样的代码。想法很好，那么有两个问题需要解决，

这个判断代码应该写在哪里？用npm run 的时候自动执行
‘开发环境’ 这个变量应该判断在哪里赋值？

第一个问题： vue-cli 脚手架提供一个可以手动配置的webpack配置文件，叫做vue.config.js ，新的脚手架不会自动生成，需要手动。注意不能写错并且和package.json 同级目录。

此时在执行 npm run 的时候会依据vue-cli-service 自动加载并且执行

第二个问题 if 里面条件变量开发环境 怎么赋值 这个就涉及到环境变量，这个怎么操作？

环境变量ENV

在cli中通过在根目录下也就是和packge.json 同一级目录中添加如下文件

.env

这个.env 文件本称之为环境文件，打开编辑定义的格式为‘键=值’

 VUE_APP_SECRET=secret

也可以定义其他的； .env 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用;

现在打开vue.config.js 加入一行代码

console.log(process.env.VUE_APP_SECRET)

校验，是否有效果, 在控制太可以看到

secret

被打印出来了。但是好像还是不能明显的区别开发环境还是生产环境，继续

.env 的执行顺序

通常情况所有的环境开发环境、测试环境、生产环境都会执行.env 文件。那么到底怎么区分；很简单如下定义即可

.env                 # 在所有的环境中被载入
.env.dev            # 只在指定的模式中被载入
.env.prd            # 只在指定的模式中被载入

有后缀的env要高于没有后缀的文件优先运行，也就是说 .env.dev 要高于 .env 的级别到这里，就可以在不同的环境文件里面定义不同的环境变量，执行不同的配置

而现在需要解决指定的模式；

模式

模式是 Vue CLI 项目中一个重要的概念，默认情况是如下：

development  模式用于 vue-cli-service serve
production  模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test  模式用于 vue-cli-service test:unit

而现在，默认的不符合需求，需要自定义，执行 .env.dev 这里面的环境变量，此时需要 --mode来实现，

打开 packge.json 设置如下脚本

 "dev": "vue-cli-service serve --mode dev"

此时执行

npm run dev

就会执行 .env.dev 从而获取到环境变量从而实现不同的环境加载不同的配置文件生产环境也是一样，需要几个配置几个

总结实现完整的代码

配置.env.dev

```javascript VUE_APP_ENV=dev

配置.env.prd

```javascript
VUE_APP_ENV=prd

说明 VUE cli 中只有 VUE_APP_ 开头才能被识别为特定的环境变量，写入webpack.DefinePlugin 静态嵌入到客户端侧的包中

编写 vue.config.js

let runConfig = process.env.VUE_APP_ENV;
if(!runConfig){
  runConfig='dev'
}
let envConfig = require(`./build/${runConfig}.config.js`);
module.exports=envConfig;

编写 package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --mode dev",
    "build:prd": "vue-cli-service build --mode prd"
  }

开始测试

npm run dev   // 执行开发环境

打包生产环境

npm run build:prd

结束补充：

关于分离的配置文件如何合并？

如 base.config.js 和dev.config.js 是怎么合并的？需要一个插件 webpack-merge，通过这个插件就能合并两个配置文件

const merge = require('webpack-merge');
const baseconfig = require('./base.config');
let devConfig ={
  publicPath:'/'
}
module.exports = merge(baseconfig,devConfig)