Vue proxyTable build打包后访问报404

问题描述

vue proxyTable 热启动状态下能正常访问，打包后访问就包404

配置参考：https://cli.vuejs.org/config/#devserver-proxy

代理配置

$ vim vue.config.js

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    // change xxx-api/login => mock/login
    // detail: https://cli.vuejs.org/config/#devserver-proxy
    [process.env.VUE_APP_BASE_API]: {
      //target: `http://127.0.0.1:${port}/mock`,
      target: 'http://192.168.1.22:9200',
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: '',
      }
    },
    //'/api': {
      //target: 'http://192.168.1.22:9200',
      //changeOrigin: true,
      //ws: true,
      //pathRewrite: {
        //'^/api': '',
      //},
    //}
  },
  disableHostCheck: true,
  //after: require('./mock/mock-server.js')
},

环境配置

$ vim .env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

API请求基地址设置

$ vim src/utils/request.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

解决方案

proxyTable代理打包后没用的，那个只是针对本地开发用的，需要借助Nginx完成代理

server {
    listen       80;
    server_name  gray.yezhou.me;

    location / {
        root   /home/yezhou/spring-cloud-gray-webui/dist;
        index  index.html index.htm;
    }

    location /prod-api/ {
        proxy_set_header Host $host;
        proxy_set_header x-forwarded-for $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://192.168.1.22:9200/;
    }
}