vue新建环境变量

1. 【环境变量】背景：

• 在我们的实际项目开发中，一般会区分几个环境，分别是开发环境、测试环境和生产环境，当然不排除分的比较细的还有预发布环境，一般来说这四个环境就足够我们使用了。

2. 新建环境步骤：

2.1 在根目录下新建4个环境变量文件：

• .env.dev【开发环境】
• .env.test【测试环境】
• .env.uat【预发布环境】
• .env.prod【生产环境】
• 四个环境内的文件内容如下：

//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL ="https://dev.it98k.cn"--------------------------------------------------------------//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL ="https://test.it98k.cn"--------------------------------------------------------------//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL ="https://uat.it98k.cn"--------------------------------------------------------------//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL ="https://prod.it98k.cn"--------------------------------------------------------------

2.2 然后修改package.json【scripts】下的启动命令:

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod"
  },

• 这样修改完，本地启动项目命令依然是：npm run serve
• 打包测试环境的命令是：npm run build:test
• 打包预发布环境的命令是：npm run build:uat
• 打包生产环境的命令是：npm run build:prod