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,在文件中添加如下配置:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /dist/index.html [L]
</IfModule>
- 因为我打包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
以上,本机测试可用