VUE 生产环境 跨域

恩~~~跨域一直都是前端开发比较关键的点。

VUE的跨域分开发环境+生产环境,开发环境就是在 /config/index.js下配置proxyTable 跨域。

这里简单贴一下代码,不多讲。

 proxyTable: {
      '/api': {    //将www.exaple.com印射为/apis
          target: 'https://xxx',  // 接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: {
              '^/api': ''   //需要rewrite的,
          },
          secure: false,
          headers: {
              Referer: 'https://xxx'
          }
      }
    },

主要讲一下生产环境的跨域问题。貌似是因为打包项目后代理就失效啦,所以再生产环境下要重新配置一下跨域。网上的方案有很多种,这里就讲一种我个人觉得还是挺不错滴,生产和开发环境自动识别切换的一种配置方式。

 

(1)再config/dev.env.js下配置开发环境的API_ROOT

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'   //这是新增的代码
})

 

(2)再config/prod.env.js下配置生产环境的API_ROOT

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://xxx/"'   //这是新增的代码
}

(3)在需要调用的地方

export const evidence_url = process.env.API_ROOT + '/' + '';  

//process.env.API_ROOT 根据不同的环境会返回给你不同的API_ROOT

 

(4)重启项目测试没有问题,打包上传吧!嘻嘻~

 

其实个人jue的VUE配置跨域思路还是蛮简单清晰的,因为他内部做了封装,所以我们写的时候简化了很多。

小白菜如果有什么讲的地方不正确,不完善的请大佬多多指教~

biu~~~

展开阅读全文

没有更多推荐了,返回首页