方法1
node属性process.argv
改属性为node执行命令获取到的命令集合
如打包命令为npm build dev则获取到集合['npm', 'build', 'dev']，则在集合中能获取到dev这个数值
在node环境中可以使用这个变量
具体可参考node文档
- webpack.base.conf.js
在这个文件下可以使用变量``process.argv`
则定义变量isProduction
var isProduction = 0;
for(var i = 0;i < process.argv.length;i++){
if(process.argv[i]=="production"){
isProduction = 1;
break;
}else if(process.argv[i] == "prev"){
isProduction = 2;
break;
}
}
并且在webpackConfig.module.rules中为vue共用变量文件注入此变量
module: {
rules: [
{
test: require.resolve('../src/constant'),
loader: "imports-loader?isProduction=>" + JSON.stringify(isProduction)
}
]
}
- vue中定义一个文件存放变量
var tmp = "";
if(isProduction == 1){ //生产
tmp = "生产环境地址";
}else if(isProduction == 2){ //预生产
tmp = "预生产环境地址";
}else{ //开发环境
tmp = "开发环境地址";
}
export const API_BASE_URL = tmp;
- 修改
package.json的script 语句
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:dev": "npm run build -- dev"
}
后续在vue项目中导入这个文件就能够使用
方法2
- 在config文件夹中新建文件
xx.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"xx环境要使用的地址"',
}
- 修改
./build/webpack.prod.conf.js文件 修改 evn
//注释掉之前的代码
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
//修改后的代码
const env = require('../config/' + process.env.env_config+'.env')
- 安装
cross-env的插件
npm install cross-env -dev--save
- 修改
package.json的script 语句
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js"
}
方法三
在某个文件夹下定义一个存放地址的文件，每次打包前切换变量值
