原理:
1,利用node的fs模块读取文件处理成对象
2,用webpack.DefinePlugin插件,设置process.env
readEnv.js
const fs = require('fs');
const path = require('path');
// 读取环境变量的文件把它转化成对象
module.exports = (file) => { // flie为文件路径
let fileName = path.join(__dirname, file);
let data = fs.readFileSync(fileName, { encoding: 'utf8' })
let d = data.replace(/\r/g, ',').replace(/\n/g, '') // 把换行和回车替换
let arr = d.split(',').map(item => {
return item.split('=')
}) // [ [ 'a', '1' ], [ 'b', '2' ] ]
let obj = {}
arr.forEach(item => {
obj[item[0]] = item[1]
})
return obj //{ a: '1', b: '2' }
// 可以接着处理
/* 像vue-cli3 新版create-react-app 一样规定环境变量的Key必须以(VUE_APP_) (REACT_APP_) 开头 */
}
.env.development
webpack.dev.conf.js改动
const readEnv = require('./readEnv')
const env = readEnv('../.env.development')
...
plugins: [
new webpack.DefinePlugin({ // 定义环境和变量
'process.env': {
NODE_ENV: "'development'",
...env
}
})
]
index.js改动
console.log(process.env, '环境变量')
效果
打包后生产环境: