vue-11-cli3多环境配置

vue-cli 迭代太快，3.0的版本都还没有很熟悉，4.0的版本就已经出来了，我电脑上现在的版本是 4.1.2 版本了，所以新建了一个4.0版本的项目，来看看与之前的2.x 和 3.x 版本有什么区别。

首先比较 4.0 与3.0 的区别：如果是 3.x 的项目 升级到 4.x 版本，基本没有什么大的变化，就是一些插件的升级 可以在这篇 博文中找到详细升级点 https://blog.csdn.net/qq_39953537/article/details/102759821

然后就是 3.x 与 2.x 版本的比较了，相对于 2.x 版本，3.x 和 4.x 版本 做了较大的改动

有关于 3.x 版本设置环境变量

1、3.x 版本的 bulid 文件夹、config文件夹，都被移除了，所以在配置多环境的时候，需要在 package.json 文件同级目录下，新建环境文件。

有关环境变量与模式概念可以参考文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

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

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

注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

上面这一段话在我理解看来，其实最重要的有两点：

• 一个模式可以包含多个环境变量。这句话代表的是，一个模式，也就是代表一个环境文件，这个文件内部可以存在多个环境变量，这些环境变量在项目编译的时候，会根据编译命令，将不同的环境文件编译到项目中，也就是会将不同的环境文件中的环境变量编译到项目中运行。
• 每个模式都会将 NODE_ENV 的值设置为模式的名称。如果我运行项目的模式是dev。那么 NODE_ENV 的值会被默认为 dev。且只有在 .env.dev 这个模式下的 变量才会被编译到项目中
• 即使添加了不同环境的模式文件，我们也会在文件内部显式的声明 NODE_ENV 的值，且项目运行的时候，这个值会覆盖模式文件默认值
• 

2、在客户端侧代码中使用环境变量

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。可以这样访问它们：

console.log(process.env.VUE_APP_TITLE)

在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_TITLE=1 的情况下，它会被替换为 "1"。 

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。还可以是你自己添加的pre预发模式等等，具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

但是 如果 设置的环境变量不是 以 VUE_APP_ 开头的，那么 webpack.DefinePlugin  并不会在编译的时候，自动将这个环境变量编译到项目中，需要显式的 调用 webpack.DefinePlugin  ，手动将环境变量 写入项目中。

• 就是在 vue.config.js  文件中进行配置，访问的时候，也和以 VUE_APP_ 开头的变量访问方法一致 

new webpack.DefinePlugin({
    APITYPE: JSON.stringify(process.env.API_TYPE)
}),

3、配置环境文件之后，需要在 package.json 文件配置运行命令。

配置之前的运行命令

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

配置之后的运行命令 

"scripts": {
    "start": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build:test": "vue-cli-service build --mode test",
    "build:pre": "vue-cli-service build --mode pre",
    "build": "vue-cli-service build --mode production"
  },

4、运行项目的模式

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

 这个脚本是运行项目的脚本 。 --mode 选项参数为命令行覆写默认的模式。可以传递 dev、test、pre、production 等之前设置的四个环境文件的模式。传递不同的参数之后，运行项目，就会将不同的环境文件中的变量编译到项目中。

ps：这里就和 cli2.x存在差异了，cli2.x若是想在本地运行不同的环境，需要  在  build/webpack.dev.conf.js 配置，通过引入 config 文件夹内的脚本，来运行不同的环境

new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
}),