[JavaScript知识库]vue-cli实现多环境打包发布

不知不觉又要搞搞前端了，打包发布时有多个环境，手动切换容易出错并且麻烦，下面记录一下配置多 环境打包的过程：

1. 分别创建本地环境，测试环境，生产环境配置文件。.env.dev；.env.prod；.env.testenv
2. 他们的内容分别为：

.env.dev

NODE_ENV = 'development'
VUE_APP_DESC = '本地开发环境'
VUE_APP_BASEURL = 'http://xxx.com'
VUE_APP_PUBLICPATH = './'

.env.prod

NODE_ENV = 'production'
VUE_APP_DESC = '生产环境'
VUE_APP_BASEURL = 'http://xxx.com'
VUE_APP_PUBLICPATH = './'

.env.testenv

NODE_ENV = 'production'
VUE_APP_DESC = '测试环境'
VUE_APP_BASEURL = 'http://xxx.com'
VUE_APP_PUBLICPATH = './'

3. package.json中配置打包脚本命令

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

4. api调用时使用全局变量

const baseUrl = process.env.VUE_APP_BASEURL

5. 打包命令：

npm install <br>

npm run dev   // 本地运行--开发环境

npm run dev:test   // 本地运行--测试环境

npm run build:test   // 打包发布--测试环境

npm run build:prod   // 打包发布--生产环境

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖