环境变量和开发环境解决跨域问题

84 阅读1分钟

环境变量

1、开发环境基地址配制

在文件 .env.development  中

    VUE_APP_URL="<http://localhost:3000/api>"

2、生产环境基地址配制`

在文件  .env.production 中

   VUE_APP_URL="<http://119.91.150.211:3000/api>"

3、request.js使用基地址

baseURL:process.env.VUE_APP_URL

开发环境解决跨域问题

1:修改开发环境接口基地址为一个相对值   

在文件 .env.development  中
   
   VUE_APP_URL='/xxx'

http:开头就是绝对值,
我们开发环境要去请求localhost前端服务器,以/开头就是一个相对址
比如:'/xxx',值的名字没有限制 
2:配制开发环境的服务器proxy
   vue.config.js
      module.exports={
           // 开发环境的服务器
          devServer:{
             proxy:{
               '/xxx':{
                  target:'真实接口基地址'// 当使用代理时,它会去调用真实接口基地址值,它内部会做一个拼接
                  // 拼接方式:真实接口基地址+'/xxx',
                  // 实际没有/xxx,我们需要去掉/xxx
                  pathRewrite:{
                    '^/xxx':''
                  }
               }
             }
    
          }
      }