通过多种方式配置vue react项目的环境变量，脚手架构建的项目文档说明比较完善，主要说明不使用脚手架自定义构建的项目
1.使用vue-cli构建的vue项目设置环境变量
2.使用create-react-app创建的react项目
//www.greatytc.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)
