Chaoszhu'Blog

Appearance

vue-cli2环境配置 ​

process.env.NODE_ENV ​

  • process为Node.js环境下全局变量，process.env中包含着关于当前系统环境的信息
  • process.env.NODE_ENV为webpack构建时根据mode配置而创建的全局环境变量，默认有development与production两种环境

cross-env 自定义全局环境变量 ​

使用

  • 1、cnpm i -D cross-env
  • 2、package.json中配置
js
  "scripts": {
        "local": "cross-env BUILD_ENV=local webpack-dev-server --hot --env develop --progress --profile --color --host 0.0.0.0"
   }
// 只需要在cross-env后面加上自定义环境变量即可

注意

  • BUILD_ENV为自定义环境变量名称，cross-env@5.2.0经测试这个变量只能在webpack的配置文件中访问到，在工文件例如main.js)中(无法像process.env.NODE_ENV中访问，因此需要配合Webpack内置插件DefinePlugin来使用.

DefinePlugin 设置全局环境变量 ​

结合Webpack.DefinePlugin插件生成全局环境

js
plugins: [
              // ......
                new webpack.DefinePlugin({
                        // 定义构建时的全局环境变量
			GLOBAL_ENV: JSON.stringify(process.env.BUILD_ENV),
                        // 非本地环境时，定义全局BASE_API，用于部署不同环境生成的前缀域名
			BASE_API': JSON.stringify(process.env.BUILD_ENV !== 'local' ? buildEnv[process.env.BUILD_ENV]: '')
                }),
               // ......
]

参考文章 ​