Vue设置路由为History模式，打包后访问404问题

最新推荐文章于 2025-03-08 01:36:02 发布

原创最新推荐文章于 2025-03-08 01:36:02 发布 · 3.7k 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

在Vue项目中，将路由设置为History模式会导致打包后访问出现404错误。解决方法包括：1) 对于Apache，需在httpd.conf中添加配置；2) 对于Nginx，需修改nginx.conf；3) 对于IIS，需安装URL重写工具并设置规则。完成上述步骤后，需重启相应服务器。

一般情况下开发的单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，我们通常在路由index.js里面设置：

export default new Router({
mode: 'history',

这样URL不再会有#号，在Dev开发阶段一切都是正常的，可是在使用npm run build打包发布后页面显示一片空白和刷新项目路径出现404错误。
解决方法如下：
1、apache需要配置httpd.conf
打开文件在最后添加：

ErrorDocument 404 /index.html

2、nginx需要配置nginx.conf
打开文件修改成如下：

# 路径是根目录时
location @router { 
  rewrite ^.*$ /index.html last; 
 }
location / {    
   try_files $uri $uri/ @router;    
    index index.html; 
}

3、IIS解决方案

3.1、更新IIS版本，最好的6以上的IIS，否则可能装不上。

3.2、下载web程序安装平台

3.3、安装完成后，打开IIS，在主页上，可以看到安装的web程序安装平台

3.4、找到你配置的网站，双击打开web程序安装平台，并在他产品选项下的服务器中找到URL重写工具，进行安装

3.5、安装完成后，你的网站主界面上，会多出一个URL重写选项

3.6、打开这个工具，添加规则——空白规则—

3.7、随便给规则定个名字，在设置匹配URL时候，将“使用”选项改为“通配符”，将模式中写上“*”

3.8、设置条件选项，点击添加，在选择输入字符串是否时：选择不是文件，然后确定

3.9、接着就是设置操作中的操作属性，在里面写你打包后的index.html路径，因为你放入的是dist文件夹所以我们要在inde.html 前加上

3.10、保存，重启IIS。完美解决。

3.11、设置好以后，在你的文件路径下，会都出一个web.config文件。其内容如下，如果安装不成功的，可以将这个文件内容直接写好放到目录下，也是可以的。