Vue-cli3 区分环境打包

Vue-cli2的环境配置和Vue-cli3不一样。现在每篇文章还得区分版本，不知道Vue全面支持TS之后会是怎么样 =口=！

原理

• 不管怎么变，基本原理都是在node进程中配置process.env的属性，然后可以全局访问process.env.xxx
• Webpack进一步进行了封装，使用DefignPlugin插件，配置全局常量，写入process.env，并在文件中以process.env.xxx方式使用

Vue-cli3封装

• Vue-cli3中使用dotenv包进行环境管理，所以需要在根目录下配置.env文件。
• Vue-cli3中还对其做了其他封装，以后再看源码吧。先看怎么配置。

配置

• 用途：常用的配置就是根据不同的打包命令，可以生成不同接口URL的打包文件

1. 根目录下新建env.dev和env.test文件，分别写入配置

// env.dev
VUE_APP_baseURL=/dev/

// env.test
VUE_APP_baseURL=/test/

2. package.json文件中配置scripts命令

"build_test": "vue-cli-service build --mode test",
"build_dev": "vue-cli-service build --mode dev",

3. axios配置文件中使用

console.log(process.env.VUE_APP_baseURL)
let Axios = axios.create({
 baseURL: process.env.VUE_APP_baseURL,
 timeout: 50000
})

4. 分别执行打包命令 npm run build_test 和 npm run build_dev，查看打印内容
   dev:
   
   test:

注意：

如果是要在项目包中使用的变量，必须以VUE_APP_开头才能被访问到