vue-cli（2-4）环境模式配置

Vue Cli 项目中有三种模式：development（开发模式）、production（生产模式）、test（测试模式）。

每种模式可配置多个环境变量。

若有多个开发环境，且每个环境的域名、主页不同，则需要给每个开发环境配置不同的域名等，打包时根据变量来区分不同的环境，引入相应的配置。

 

一、vue-cli3和4环境模式配置

文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

 1.在根目录添加.env.hello文件：配置环境中需要用到是全局变量（环境名，域名，主页）

2. 在package.json中配置：打包时对应不同环境的命令

3.执行 

npm run serve:hello

在main.js中打印process.env,显示内容为env.hello中的配置

 

二、vue-cli2环境模式配置

 1.在config目录添加hello.env.js文件：配置环境中需要用到是全局变量（环境名，域名，主页）

2.安装cross-env: 

cnpm i cross-env --save

3. 在package.json中配置：打包时对应不同环境的命令,通过cross-env 设置了不同的变量 env_config 

4.在build/webpack.dev.conf.js中设置全局process.env为。。。.env.js文件的内容

5.打包npm run dev:hello

main.js中打印出process.env