vue配置工程化的解决思路,1.区分环境,2.寻求异同,3.针对处理
区分环境:利用环境与运行命令区分项目环境(process['env']['NODE_ENV']:环境运行变量)
寻求异同:根据自己项目所需服务环境定义适合自己的配置参数,如:
const devEnv = {
pro: '',
sit: 'sit',
dev: 'uat',
uat: 'uat',
production: ''
};
const newEvn = devEnv[process['env']['NODE_ENV']];
const config = {
// 基础服务配置
baseUrl: https://xxx${newEvn}.xxx.cn,
// 跳转授权页面
wxAuthUrl: https://xx${newEvn === 'sit' ? 'test' : newEvn}.xxx.cn/xxx.html?originUrl=${window.location},
};
export default config;
针对处理:如wxAuthUrl就是根据环境进行特殊处理
运行命令: "pro": "cross-env NODE_ENV=prod vue-cli-service serve"=>pro环境=>npm run pro, "sit": "cross-env NODE_ENV=sit vue-cli-service serve"=>sit环境=>npm run sit, "dev": "cross-env NODE_ENV=dev vue-cli-service serve"=>dev环境=>npm run dev, "uat": "cross-env NODE_ENV=uat vue-cli-service serve"=>uat环境=>npm run uat, "build": "vue-cli-service build"=>production环境=>npm run build 相关依赖:yarn add cross-env