webpack和vue-cli环境变量配置

利用webpack打包代码时，如果需要区分生产和开发环境分就需要用到环境变量。

webpack环境变量配置

首先需要在webpack 命令行配置 --env：

    webpack --env.production    # 设置 env.production == true
    webpack --env.NODE_ENV=local  # 设置 env.NODE_ENV == "local"
复制代码

--env配置好后还需要将webpack 配置文件进行修改。通常，module.exports 指向配置对象。要使用 env 变量，你必须将 module.exports 转换成一个函数：

module.exports = env => {
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}
复制代码

--env 参数的多种语法：

vue-cli中环境变量配置

vue-cli2.0

vue-cli2.0需要借助插件cross-env。

cross-env能跨平台地设置及使用环境变量。

安装：npm install cross-env --save-dev

修改package.json ：

"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",//生产环境
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",//开发环境
复制代码

配置好后就可以通过process.env.NODE_ENV 和process.env.env_config 访问了。

vue-cli3.0

项目根目录中新建下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
复制代码

然后文件中写入'键值对'即可：

FOO=bar
复制代码

同样是通过process.env.FOO 访问。

在客户端代码中使用环境变量

以上方法配置的环境变量只能在node环境下可以访问到；然而你想在客户端代码里面访问环境变量需要借助插件DefinePlugin。

DefinePlugin不需要额外安装，只需要引入webpack并在配置文件里配置plugins：

plugins: [
    new webpack.DefinePlugin({ //环境变量
        // 定义 NODE_ENV 环境变量为 production，以去除源码中只有开发时才需要的部分
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV) 
        }
    })
]
复制代码

注意：如果去掉JSON.stringify会被当成code片段,具体用法：juejin.im/post/5c0237…

vue-cli3.0中内置了DefinePlugin，只需要在变量名前面加上VUE_APP_，例如：

VUE_APP_TITLE=My App
复制代码

vue-cli3.0还有两个特殊的环境变量，也是可以在客户端代码中访问到的：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。也可以自定义覆盖。

• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

转载于:https://juejin.im/post/5cbeb144e51d456e541b4cf2