vue项目部署成功后刷新页面报404

゛躲三生

于 2023-09-17 23:36:27 发布

阅读量1.2k

点赞数 1

分类专栏：服务器文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Mr_Yixiansen/article/details/132958359

版权

服务器专栏收录该内容

2 篇文章

订阅专栏

项目部署成功后，刷新页面报404、nginx代理失败，有多种解决方式。一是修改路由默认模式，将history改成hash，但url中会出现#锚点；二是修改nginx配置，通过宝塔面板在网站配置文件的server下添加代码，保存后刷新项目即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当项目部署成功的时候，刷新页面报 404 nginx代理失败

此类问题解决方式有很多

1. 修改路由默认模式

修改路由模式，但是在 url 中会出现 # 锚点，将 history 改成 hash

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes
});

2. nginx 修改配置

2-1. 由于我的项目是通过 nginx 进行部署的，所以在这儿我修改了 nginx 的相关配置

2-2. 通过宝塔面板在网站菜单里面找到自己部署的网站，点击右侧的设置，在配置文件中 server 下面添加一段代码

 location / {
        root   /www/wwwroot/test.com;  // 这个是你部署项目的根目录
        index  index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /index.html;
    }

在这里插入图片描述
修改后保存，就可以刷新你的项目了，此时就不会出现 404 的问题了