一，命令
npm run build -环境 -域名 -打包文件夹 -平台
npm run serve -prod -http://xx.com -dist -0
npm run build -prod -http://xx.com -dist -0
二，参数说明：
1，环境，测试 uat 跟 正式 prod，必填：如果不指定需要填写 0
2，域名，需要打包或者运行的命令，必填：如果不指定需要填写 0 默认取config配置域名
3，打包文件夹，必填：如果不指定需要填写 0 默认是dist
4，平台，可选，需要打包打包的平台，一套代码不输给不同用户，涉及到的logo，favicon.ico不一致，需要做专门配置
参数可自行定义，
三，原理
通过获取命令行参数，将命令行参数解析成对应字段内容，通过webpack传入到页面，供网络请求等使用。
四，代码说明
在项目根目录新建config 文件夹
添加environment.js跟index.js文件
environment.js 文件内容 -- 解析命令行参数
const configArgv = JSON.parse(process.env.npm_config_argv);
const original = configArgv.original.slice(1);
const stage = original[1] ? original[1].replace(/-/g, "") : "uat";
const requestHttp = original[2] ? original[2].replace(/-/g, "") : "0";
const distName = original[3] ? original[3].replace(/-/g, "") : "0";
const platform = original[4] ? original[4].replace(/-/g, "") : "0";
module.exports = {
stage,
requestHttp,
platform,
distName
};
index.js 文件内容 -- 配置各环境默认域名
const config = {
uat: { // 测试环境网络请求地址
"0": "http://xx.com"
},
prod: { // 正式环境网络请求地址
"0": "http://xx.com"
}
}
module.exports = {
config
};
vue.config.js配置
const environment = require("./config/environment"); // 引入获取命令行参数js
const baseconfig = require("./config").config;
if (environment.requestHttp == '0') {
environment.requestHttp = process.env.NODE_ENV === 'production' ? baseconfig.prod[environment.platform] : baseconfig.uat[environment.platform];
}
module.exports = {
...
chainWebpack: config => {
config.plugin("define").tap(args => { // 讲参数传入项目中，可在main.js或者项目中的config 通过process.env 获取
args[0]["process.env"].STAGE = JSON.stringify(environment.stage);
args[0]["process.env"].URL = JSON.stringify(environment.requestHttp)
args[0]["process.env"].PLATFORM = JSON.stringify(environment.platform);
return args;
});
...
} ,
devServer: {
...
proxy: environment.requestHttp || null, // 配置代理
...
},
...
}
五，使用
在main.js或者配置域名的地方使用，
console.log(process.env);
网友评论