Vue 打包部署到服务器后,非主页刷新后出现404问题解决
先不讨论是什么原因,直接说解决方法,分两种情况,一种是直接部署到根目录出现404,另一种是部署到二级以上目录出现404如果是部署到根目录出现404问题,分以下情况如果服务器是apache环境确认apache的mod_rewrite模块是否安装并开启,在根目录寻找.htaccess文件,如果不存在则创建该文件,在.htaccess文件中加入以下代码<IfModule m...
·
先不讨论是什么原因,直接说解决方法,分两种情况,一种是直接部署到根目录出现404,另一种是部署到二级以上目录出现404
如果是部署到根目录出现404问题,分以下情况
如果服务器是apache环境
- 确认apache的mod_rewrite模块是否安装并开启,
- 在根目录寻找.htaccess文件,如果不存在则创建该文件,
- 在.htaccess文件中加入以下代码
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
(适用于vue项目部署在根目录情况)
如果服务器是nginx环境
在nginx的配置文件nginx.conf(Linux系统中该文件一般位于/etc/nginx/目录)中,找到
location / {
#......
#所要添加的配置代码
try_files $uri $uri/ /index.html;
}
在上面位置添加代码(适用于vue项目部署在根目录情况)
如果是部署到二级或二级以上目录中
~~ 待测试后添加内容 ~~
出现这个404问题的原因
一种是因为vue router使用了history模式,由于history模式的链接url是伪静态,需要rewrite url规则来支持。
另一种是项目需要部署在二级或二级以上目录中,npm run build路径出现错误导致。
更多推荐
已为社区贡献1条内容
所有评论(0)