Vue.js —— 项目部署到线上之前的请求路径配置

开发环境的地址和接口的地址不一样，会产生跨域问题。

设置代理

在vue.js项目中可以这么设置。 

文档地址

vue.config.js

devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target:'http://192.168.18.abc', // 代理地址
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' 
        }
      }
    }
  },

假设当前本地的地址是 192.168.18.50：3000，若要获取某个列表

设置代理之后，访问本地的项目地址

浏览器会先访问 192.168.18.50：3000/api/xx?xx=yy

代理到这个地址——》https:192.168.18.abc./api/xx?xx=yy

 

开发环境和生产环境的请求地址是不一样的，配置打包时的请求地址：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/线上地址'
    : '/'
}