《环境变量》 开发环境跨域

动态区分开发环境和生产环境

可以在.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的改动如果要生效,需要进行重启服务