vue-cli 根据不同的环境变量打包

官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html

 

个人实践

 

1. 首先在项目根目录创建不同环境的 .env文件

 

 

2. 在.env.xxx 文件中添加内容

NODE_ENV = production

VUE_APP_API_BASE_URL =/
VUE_APP_TITLE = 'xxx管理系统'
VUE_APP_LOGO = '/fjcz_logo.png'
VUE_APP_LOGIN_LOGO = '/fjcz_login_logo.png'
VUE_APP_DEFAULT_PASSWORD = 'aaa#123456'
VUE_APP_SCHOOL = 'SZXY'

 

3.修改package.json中的脚本

 

  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build-ayd": "vue-cli-service build",
    "build-szxy": "vue-cli-service build --mode szxy",
    "build-thd": "vue-cli-service build --mode thd",
    "build-sq": "vue-cli-service build --mode sq",
    "build-fjcz": "vue-cli-service build --mode fjcz"
  },

4. 根据 process.env 中的数据做对应的功能

 

 data () {
    return {
      school: process.env.VUE_APP_SCHOOL
    }
  },

  computed: {

    editVisible () {

      return this.$store.state.leader.editVisible

    },

    formOptions () {

      switch (this.school) {

        case 'AYD':

          return [1,2,3]

        case 'SZXY':

          return [4,5,6]

        default:

          return [7,8,9]

      }

    }

  },

 

注意事项 : 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。