Vue-cli3.x 中使用 cross-env 配置不同环境下的项目变量
博主wx: -GuanEr-
,加博主进前端交流群
在实际开发过程中,我们有时候需要在不同的环境、不同的服务器上运行我们的项目,或者项目测试环境有多个,这个时候我们就需要根据不同的环境配置不同的变量,让项目在不同的环境下都能正常使用。
一、安装插件
yarn add cross-env
或
npm i cross-env --save
二、修改配置 package.json
安装好 cross-env
之后,我们可以通过修改 package.json
中跟 build
有关的 scripts
,来设置不同打包命令下的环境变量。
"scripts": {
"serve": "vue-cli-service serve",
"build:env1": "cross-env NODE_ENV=env1 vue-cli-service build",
"build:env2": "cross-env NODE_ENV=env2 vue-cli-service build",
"build:env3": "cross-env NODE_ENV=env3 vue-cli-service build",
"lint": "vue-cli-service lint"
}
注:
vue-cli-service build
是打包命令对应的 JS 脚本,这里要根据你项目里的脚本保留这段配置,比如是自己写的打包脚本,那么这里就保留该脚本目录就好。build:env1
冒号后面的条件可以根据项目情况自主设置,比如build:test
、build:prod
等。
三、根据配置文件中的命令打包不同环境下的项目
3.1 运行 yarn build:env1
在任意 JS
脚本中获取环境变量:
3.2 运行 yarn build:env2
在任意 JS
脚本中获取环境变量:
3.3 运行 yarn build:env3
在任意 JS
脚本中获取环境变量:
四、不同环境变量的使用示例
// 项目中 axios 请求的封装
import axios from 'axios'
const env = process.env.NODE_ENV;
const request = axios.create({
withCredentials: false
});
request.interceptors.request.use(config => {
// ...
switch(env) {
case 'env1':
// ...
break;
case 'env2':
// ...
break;
case 'env3':
// ...
break;
}
return config;
});
export default function ajax() {
return new Promise(() => {
request().
then().
catch()
});
}
五、配置除默认变量以外的变量
process.env.NODE_ENV
是 Node
配置的默认变量,如果项目中需要更多这样的变量来适配不同环境,需要做配置。直接设置在 scripts
中是不生效的。
比如直接书写
"scripts": {
"serve": "vue-cli-service serve",
"build:test": "cross-env NODE_ENV=env1 CLIENT_NAME=zs URL=http://www.xxx.url vue-cli-service build"
}
在上面的配置中,除了配置了 NODE_ENV
之外,还配置了 CLIENT_NAME
和 URL
,我们可以在任意 JS
脚本中获取,拿到的都是 undifined
:
所以,要使用更多的变量,需要在 vue.config.js
中做以下配置:
const webpack = require('webpack');
module.exports = {
publicPath: './',
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
// 如果需要更多的变量,那就在这里添加更多的键值对
URL: JSON.stringify(process.env.URL),
CLIENT_NAME: JSON.stringify(process.env.CLIENT_NAME)
}
})
]
}
};
然后更改 package.json
中命令:
"scripts": {
"serve": "vue-cli-service serve",
"build:env1": "cross-env NODE_ENV=env1 CLIENT_NAME=zs URL=http://www.xxx.url1 vue-cli-service build",
"build:env2": "cross-env NODE_ENV=env2 CLIENT_NAME=ls URL=http://www.xxx.url2 vue-cli-service build",
"build:env3": "cross-env NODE_ENV=env3 CLIENT_NAME=ww URL=http://www.xxx.url3 vue-cli-service build"
}
然后分别运行三个打包命令并且在任意脚本中读取 CLIENT_NAME
和 URL
:
yarn build:env1
yarn build:env2
yarn build:env3
获取结果: