Chaoszhu'Blog

Appearance

vue-cli配置环境变量 ​

cross-env配置与说明 ​

vue.config.js配置环境变量方案一 ​

js
// yarn add cross-env -D
// package.json script配置
{
  "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // run本地
  "build:test": "cross-env BUILD_ENV=test vue-cli-service build", // 构建测试环境
  "build:prod": "cross-env BUILD_ENV=prod vue-cli-service build" // 构建生产环境
}
js
// vue.config.js
// 1. cross配置后，只能在vue.config.js中通过process.env.XXX能够访问到自定义的环境key：value
console.log(process.env.BUILD_ENV)

// 2. vue-cli4提供的全局环境变量配置，格式必须是process.env.VUE_APP_XXX格式
process.env.VUE_APP_BUILD_ENV = process.env.BUILD_ENV

// 3. 在整个项目中访问：process.env.VUE_APP_BUILD_ENV
  • 也可以在root目录配置成文件，例如：.env.xxx，见 官网文档

vue.config.js配置环境变量方案二【推荐】 ​

js
chainWebpack: config => {
    config
        .plugin('define')
        .tap(options => { 
          // options: [ { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"', IS_ELECTRON: true }, __static: '"D:\\xxxx\\public"' } ]

          // 必须序列化一次
          options[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)

          // 这样也可以，原理同上
          // options[0]['process.env'].BUILD_ENV = `"${process.env.BUILD_ENV}"`

          // definePlugin处理value如果是一个字符串，它将会被当做code片段，因此需要序列化
          // options[0]['process.env'].BUILD_ENV = process.env.BUILD_ENV
          return options
        })
}

注意

推荐使用方案二配置环境变量，方案一访问环境变量需要加前缀VUE_APP_*

使用 ​

js
// /* 开发目录
console.log(process.env.BUILD_ENV) // dev、test、prod

源码 ​

define定义 ​

resolveClientEnv方法定义 ​