在vue搭建项目时,我们通常会使用 vue-cli 搭建脚手架,在开发过程中,我们需要根据开发环境和正式环境不同, 去请求不同域名下的后台接口, 这时候, 我们需要根据环境不同来自动切换请求的域名。
在此我使用的是webpack 打包的打包工具,通过获取NODE_ENV环境变量来进行操作,配置如下:
1.修改config文件夹下的dev.env.js文件
module.exports = {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
BASE_API: '"http:开发时请求的url"'
}
2.修改config文件夹下的prod.evn.js文件
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"http:生产时请求的url"'
}
3…修改package.json 文件的script
"scripts": {
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
}
4.接口调用时使用 process.env.BASE_API
const service = axios.create({
withCredentials: true,
baseURL: process.env.BASE_API,
timeout: 15000 // 请求超时时间
})
5.执行不同的命令将使用不同的运行环境,如果在运行时报:‘cross-env’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。那就运行npm i cross-env --save-dev就可以了