方式一:cross-env
const NODE_ENV = process.env.NODE_ENV;
下载插件
npm i cross-env -D
pro.env.js
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"dep"',
BASE_API: '"http://xxxxx/admin"'
}
综合
const NODE_ENV = process.env.NODE_ENV;
switch (NODE_ENV) {
case 'production':
URL_A = 'https://aaaa';
URL_B = 'https://xxx';
URL_C = 'https://xxxz';
break;
case 'test':
URL_A = 'https://aaaa1';
URL_B = 'https://xxx1';
URL_C = 'https://xxxz1';
}
package.json
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "npm run dev",
"dev": "npm run dev:test",
"dev:dev": "cross-env NODE_ENV=develop vue-cli-service serve",
"dev:test": "cross-env NODE_ENV=test vue-cli-service serve",
"dev:prod": "cross-env NODE_ENV=production vue-cli-service serve",
"build": "cross-env NODE_ENV= vue-cli-service build",
"build:dev": "cross-env NODE_ENV=develop vue-cli-service build",
"build:test": "cross-env NODE_ENV=test vue-cli-service build",
"build:prod": "cross-env NODE_ENV=production vue-cli-service build",
},
OR
方式二:cli脚手架–mode
"scripts": {
"serve": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"prod": "vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
在项目中配置环境config
在根目录新建 .env.prod/.env.dev/.env.test 在文件中添加如下代码
# NODE_ENV = 'test'
VUE_APP_XXX = 'test'
VUE_APP_BASE_URL= 'xxx'
这样在process.env在就会有你配置的内容
也可以这样配置
在src下新建config文件夹,注意环境名不是简写prod
// env.prod.js
module.exports = {
// env: process.env.NODE_ENV,
baseUrl: 'http://www.prod.com', // 项目地址
baseApi: 'http://www.prod.com/api', // 本地api请求地址
xxx: 'xxx'
};
config/index文件
// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV);
console.log('===', config);
module.exports = config;
在main里引入,这样你在不同的环境就能取到不同的值了