vue项目多环境打包

前提：使用vue-cli 创建基础脚手架

https://cli.vuejs.org/zh/

1、package.json文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",
    "prod": "vue-cli-service build --mode production",
    "release": "vue-cli-service build --mode release",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2、项目根目录下创建，设置不同的环境文件

文件内容

VUE_APP_ENV = 'test'
NODE_ENV = 'test'
outputDir = 'test'

 3、根目录下创建config/index.js文件，在调用接口处使用VUE_APP_ENV对应的host地址

const ENV = process.env.VUE_APP_ENV

// 默认参数
const params = {

}
const config = {
  development: {
     host: '/Api'
  },

  test: {
    host: 'http://localhost:8080'

  },
  
  release: {
    host: ''
  },

  production: {
    host: ''
  }
}
const data = { ...config[ENV], ...params }

export default data

4、打包命令及测试

# 测试
npm run test
# 预发布版本
npm run release
# 正式版本
npm run prod