vue-cli创建项目部署后，接口404与刷新页面404解决方案

我们在单位开发的过程中，基本上都是现成的仓库，我们只需要进行开发对应的业务就可以了，在工期比较忙的情况下，也很少会关注应用层的东西。最近我在使用vue-cli创建了一个项目，美滋滋的开发了一个页面，请求接口也没问题，紧接着我把它部署在了服务器上。不过众所周知，凡事都有一个but...

就在我访问服务器地址时候，整个页面成了一个白板，当时内心一紧，打开了控制台，控制台所有的接口都报了404，可是明明我本地是好的啊（想到了经常给测试说的话：我这看的是好的，是不是缓存的原因？你刷新试试？....）。

部署后接口请求时候404了？

但是这次不是缓存的原因，最终查阅资料后发现，这里是因为我在vue解决跨域时候，在vue.config里面配置了devServer，所以在本地调试的时候，并没有报错，例如：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000/", // 接口环境请求地址
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
      }
    },
  }
});

我们在这里进行了接口的代理，将接口前面统一添加的/api/，替换成了我们指定的服务器接口地址，例如：

// api.js
export function getUserList (data) {
  return request({
    url: 'api/user/query', // http://127.0.0.1:3000/user/query
    method: 'GET',
    params: data
  })
}

如果我们只是这么看的话，没有什么问题，但是在我们打包的时候，devServer.proxy并没有被打包到项目中，所以在部署之后，我们请求的接口就会变成127.0.0.1:3000/api/user/query，这么看来的话，确实接口是不存在的，那我们则呢么处理呢？

我们可以在服务器的nginx配置文件nginx.conf里面，添加反向代理配置，这样我们就可以把接口进行代理了，配置例如：

server {
    listen       80;
    server_name  localhost;
    #接口转发
    location ^~/person/ {
        proxy_pass http://x.x.x.x:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    #nginx代理页面地址
    location / {
        root   html/dist;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

如上5~10行，对接口进行了转发，这样就可以与我们在项目中请求的地址保持一致了。到此，我们就可以对接口与项目进行有效的请求和渲染了。

一刷新页面就404了？

终于部署完成了，看起来貌似没有什么问题，但是浏览器一刷新，页面就404了，想了半天，觉得可能出现在了路由这块，毕竟nginx代理的只是域名部分，如果把所有的路由都添加，那不是疯了，这时我突然想到，我们路由有两种模式：hash(createWebHashHistory)和history(createWebHistory),我用vue-cli创建的项目默认使用的是history，但是如果使用hash的话，hash路由并不会影响域名，这样我们只需要代理域名部分，就不会报404了。

import { createRouter, createWebHashHistory } from "vue-router"; // createWebHistory
const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("@/views/home/index.vue"),
  },
];
const router = createRouter({
  history: createWebHashHistory(), // createWebHistory (process.env.BASE_URL),
  routes,
});
export default router;

如此，收官。有不同看法的小伙伴可以在评论区留言进行讨论，如果对nginx配置部分不太明白的，可以在我前期的发表中进行查看，随便加一个传送门吧：centos安装nginx，本地安装nginx。