Vue history模式下子页面刷新404问题
Vue history模式下,开发运行的时候刷新页面没问题,但是部署在公司服务器的时候,子页面刷新会有404问题。
在Mac自带Apache下尝试了下,确实会出现,解决的过程如下:
(没在别的服务器部署过,不过也是给对应服务器加下配置就可以解决了)
Mac自带Apache基本操作
查看apache版本
sudo apachectl -v
启动apache
sudo apachectl start
重启apache
sudo apachectl restart
备份原来的文件
sudo cp /etc/apache2/httpd.conf /etc/apache2/httpd.conf.backup
修改主配置文件
sudo vi /etc/apache2/httpd.conf
以上要注意的是,一定要加sudo,使用管理员权限修改apache的配置文件
添加配置文件
在web项目根目录下创建 .htaccess,在文件中添加如下配置:
1 |
|
- 因为我打包Vue项目时设定的公共路径是 /dist/,所以上面的RewriteRule要带上,如果公共路径是 / ,则不需要加上了
- RewriteRule . /dist/index.html [L] 里面的 . 和 /dist/index.html有空格,不要去除
- 官网 有提供Apache参考配置,但本机测试不可用,有兴趣可以尝试
配置Apache
sudo vi /etc/apache2/httpd.conf
- 找到
<Directory "/Library/WebServer/Documents">
里面的AllowOverride none
,修改为AllowOverride All
- 找到
LoadModule rewrite_module
,将前面的“#”号删除
sudo apachectl restart
以上,本机测试可用
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!