vue项目使用proxy代理跨域，服务器部署接口404及history模式刷新404界面问题解决

解决proxy代理跨域，服务器部署接口404问题：

1、在vue项目的config/index.js文件中的配置

proxyTable: {
      // 代理接口解决跨域问题
      '/api': {
        target: 'http://127.0.0.1:8080',//这里改你要跨域的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      },

2、服务器的nginx配置文件在server里面加上：

location ^~/api/ {
    proxy_pass http://127.0.0.1:8080/;//你要请求的地址，与上面index.js文件配置的地址一致
}

3、重启nginx服务，即可解决服务器部署接口请求404的问题。

 

解决vue项目的history模式刷新造成的页面404

1、服务器的nginx配置文件在server里面加上：

location / {
    try_files $uri $uri/ /index.html;
}

2、重启nginx服务，即可解决解决vue项目的history模式刷新造成的页面404的问题。

注意：使用该方法，你需要在前端vue项目配置一个404的页面路由，但访问不存在的页面时跳转到自定义的404页面。