这里简单说一下Vue history和Vue hash history

首先前者是交给js文件进行处理

例如你的项目打包之后就只有一个index.html和一堆静态文件,index首页会通过调用js文件进行页面的渲染,当你访问/user/info时,它会自动到js中去找对应路径进行页面渲染。

而后者hash则会在地址栏中添加一个#,例如:localhost/#/user/info,当你访问这个页面的时候,其实就是在访问localhost,#后面的内容vue会自动丢掉。


简单的了解了一下之后,我们来看看解决思路:

你原本时想通过Nginx去访问,www.abc.com/user/info,但是你部署的项目里面只有一个index.html文件,所以Nginx以为在项目中没有这个路径,所有会返回404。

所以我们需要在访问我们部署的项目时候,通过Nginx去改变访问文件,将所有的请求都转发给index.html去进行处理。

首先在 vite.config.js中添加一个基础路径

export default defineConfig({
  base: '/',
  server: {
  ....

然后在Nginx的配置文件中配置一句

try_files $uri $uri/ /index.html;

这样后面再刷新页面就不会出现404的情况啦。

最后修改:2024 年 03 月 11 日
如果觉得我的文章对你有用,请随意赞赏