寻径

路由问题#

vue router运行在hash模式下，会有/#/，觉得很丑，然后就运行在了history模式下，但是，这么模式下需要注意一些问题： 如果你没有在nginx里配置好的话，就会导致刷新页面404。 所以，需要在nginx里配置好try_files:

1
location / {
2
    try_files $uri $uri/ /index.html;
3
}

api代理问题#

相信大家在使用vite的过程中为了隐藏后端真实网址使用过vite的代理服务器吧，类似于这种

1
proxy: {
2
      '/api': {
3
        target: 'http://localhost:port/',
4
        changeOrigin: true
5
      }
6
}

我当时认为，只要在vite里配置好代理就不需要操心了，我在main.js里配置了一些init方法，如果init报错就不创建App。其次，我也配置了上文提到的try_files，所以这就导致了看不到任何的404报错，最后去除掉try_files才定位到问题。 所以，即使在vite里配置好代理，也仅限于开发的情况下有效，在项目上线时仍然要在nginx里配置代理:

1
location /api/ {
2
    proxy_pass http://localhost:port/;
3
    proxy_set_header Host $host;
4
    proxy_set_header X-Real-IP $remote_addr;
5
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
6
    proxy_set_header X-Forwarded-Proto $scheme;
7
}

nginx会把/api/给删除，所以需要注意一下你的后端配置。 这下就可以正常访问后端接口了