基于dva搭建的项目如何设置多环境变量打包启动,主要配置如下:
1、npm安装cross-env
cross-env是运行跨平台设置和使用环境变量的脚本,主要解决windows、ios、linux系统下统一配置环境变量的。
npm install --save-dev cross-env install cross-env
之前试过通过 set API = tes 的方式设置变量,但是set方式设置的变量只能在windows环境下成功,其余环境下(ios, Linux)将会无效。
2、修改package.json文件
这里主要是为启动命令设置变量,大致意思是,根据不同的启动命令设置不同的后端请求地址,实现多环境启动。
"scripts": {
"start": "cross-env API_EVN=localdev ./node_modules/roadhog/bin/roadhog.js dev",
"prebuild": "npm run clean",
"build:dev": "cross-env API_EVN=dev ./node_modules/roadhog/bin/roadhog.js build",
"build:test": "cross-env API_EVN=test ./node_modules/roadhog/bin/roadhog.js build",
"build:prod": "cross-env API_EVN=prod ./node_modules/roadhog/bin/roadhog.js build",
"lint": "eslint --ext .js src test",
"clean": "rimraf dist",
"precommit": "npm run lint"
},
我这里区分了本地启动(npm start)、开发环境启动(npm run build:dev)、生产环境启动(npm run build:prod)和测试环境启动(npm run build:test),分别通过API_EVN进行区分;
3、修改.webpackrc文件
export default {
.
.
.
define: {
'process.env': {
'API_EVN': process.env.API_EVN,
},
},
.
.
.
};
4、config文件处设置公共路径
const localdev = 'https://***';
const dev = 'https://***/dev';
const test = 'https://***/test';
const prod = 'https://***/dev';
// const API_EVN = process.env.API_EVN;
function getApiHost(value) {
if (value === 'localdev') {
return localdev;
} else if (value === 'dev') {
return dev;
} else if (value === 'test') {
return test;
} else if (value === 'prod') {
return prod;
}
}
module.exports = {
BASE_PATH: '/',
API_HOST: process.env.API_EVN,
API: getApiHost(process.env.API_EVN),
};
接口引用
import { API } from '@/config/env';
export function fetchLookupList(params) {
return get(`${API}/v1/lookups`, params);
}
完成