vue、react项目设置多环境变量

通过多种方式配置vue react项目的环境变量，脚手架构建的项目文档说明比较完善，主要说明不使用脚手架自定义构建的项目

1.使用vue-cli构建的vue项目设置环境变量

vue-cli官方说明-模式和环境变量

2.使用create-react-app创建的react项目

https://www.jianshu.com/p/3bfa0a92a720

3.不使用脚手架构建的项目（vue react通用）

3.1 安装cross-env dotenv dotenv-expand插件

npm i cross-env dotenv dotenv-expand -S

3.2 设置package.json启动命令及对应的NODE_ENV

根据实际项目场景添加对应NODE_ENV即可

"scripts": {
    "dev": "cross-env NODE_ENV=local webpack serve --config webpack.dev.js --progress",
    "build-dev": "cross-env NODE_ENV=dev webpack --config webpack.prod.js --progress",
    "build-sit": "cross-env NODE_ENV=sit webpack --config webpack.prod.js --progress",
    "build-uat": "cross-env NODE_ENV=uat webpack --config webpack.prod.js --progress",
    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress",
  },

3.3 增加对应的.env文件

根据上面设置的NODE_ENV设置对应的.env文件及内容，如:

.env.local
.env.dev
.env.sit
.env.uat
.env.production

.env[mode]文件内容示例：

NODE_ENV: local
BASE_URL: 'http://www.baidu.com'

3.4 webpack.base.js增加配置

const webpack = require('webpack');
const path= require('path');
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');
const env = dotenv.config({ path: path.join(__dirname, `.env.${process.env.NODE_ENV}`) });
//...省略其他配置仅仅展示对应修改的部分
module.exports = {
  entry: {},
  output: {},
  module: {},
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenvExpand(env).parsed),
    }),
  ]
}

3.5 获取环境变量

console.log(process.env.BASE_URL)

4. 说明

增加以上配置后重新启动即可在项目任意地方获取环境变量的值。除此之外也可以直接在 new webpack.DefinePlugin()方法里直接配置对应的环境变量，具体方法如下：
DefinePlugin插件使用说明

4.1 安装cross-env

npm i cross-env -S

4.2 增加包含所有环境的配置文件env.config.js

module.exports = {
    // 非生产viewid
    uat: {
        weex_viewid: '6f1dc317785c4ef390191f9a1fe654b6',
        channel_list_viewid: '8dc18b3123d248d2983f7ba434143a5b',
    },
    // 生产环境viewid
    production: {
        weex_viewid: '757f00c43e934f8b8446406eac90ce64',
        channel_list_viewid: 'a4808a7230b84f5caba94d4ee6fb111e ',
    },
}

4.3 在webpack.base.js引入配置文件并增加相关配置

const envconfig = require('./env.config');
module.exports = {
  entry: {},
  output: {},
  module: {},
  plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.envconfig': JSON.stringify(envconfig[process.env.NODE_ENV]),
    }),
  ]
}

4.4 获取环境变量

console.log(process.env.envconfig.weex_viewid)