vue项目使用history模式，打包部署到服务器根目录与二级目录的方法，防止刷新后出错

A黄俊辉A

于 2021-12-07 09:36:21 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/hjh15827475896/article/details/121761299

vue 专栏收录该内容

36 篇文章

订阅专栏

本文探讨了在Vue项目中使用history模式遇到的刷新问题，提供了部署到根目录和二级目录的解决方案，并关注SEO挑战。同时介绍了如何保持SEO友好，兼顾用户体验与搜索引擎爬虫的访问。

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

在vue 打包上线后，如果我们使用的路由模式是 history 模式，那么，我们刷新其中的子页面的时候，会出现错误

解决这个问题的方法，最简单的方法就是使用 hash 模式的路由
但是 hash 模式的路径对seo 不友好，本人也不喜欢

所以我们就使用 history 模式，并且让其刷新时还不会出错
一、部署到根目录
这个方式比较简单，和你正常打包配置方式一模一样。

打包时，vue.config.js中配置publicPath=’/'即可
nginx配置：

location / {
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        } 
location @router {
            rewrite ^.*$ /index.html last;
        }

二、部署到服务器二级目录
比如，我的二级目录是 /huang/
在这里插入图片描述
我的站点根目录是 public 目录，它的二级目录中有一个 huang 目录，我准备把打包后的文件放在 huang 目录下

vue 项目中代码的配置
vue.config.js

rotuer.js 配置

nginx配置：

在这里插入图片描述