关于vue项目配置化参数思路

132 阅读1分钟

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