动态区分开发环境和生产环境
可以在.env.development
和.env.production
定义变量,变量自动就为当前环境的值
定义了变量VUE_APP_BASE_API,
该变量可以作为axios请求的baseURL
/.env.development
# base api 让当前请求被代理
VUE_APP_BASE_API = '/api'
在拦截器中设置baseURL
《环境变量》:process.env.VUE_APP_****
此时的URL是代理的URL
development => 开发环境
production => 生产环境
当我们运行npm run dev进行开发调试的时候,此时会加载执行.env.development
文件内容
当我们运行npm run build:prod进行生产环境打包的时候,会加载执行.env.production
文件内容
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
})
开发环境 跨域问题
开发环境的跨域,也就是在vue-cli脚手架环境
下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一个服务
,可以通过这个服务帮我们代理请求
,解决跨域问题。访问devServer 让devServer去访问服务器
vue-cli的配置文件即vue.config.js 配置参考
module.exports = {
devServer: {
// 代理配置
proxy: {
// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
// localhost:8888/api/abc => 代理给另一个服务器
// 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 (行得通)
// 本地的前端 =》 另外一个服务器发请求 (跨域 行不通)
'/api': {
target: 'http://ihrm.itheima.net', // 我们要代理的地址
changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
}
},
}
}
vue.config.js
的改动如果要生效,需要进行重启服务