现在单页面应用比较流行,使用单页面应用可以使页面运行的很流畅,访问起来有一个更好的用户体验,页面在使用webpack打包后上传到服务器,访问的路径中带有一些特殊符号#
,我们要去掉这个符号,一方面会对seo有有影响,另一方面路径不够美观。
前期准备
检查apache是否支持mod_rewrite
- 通过php函数
phpinfo()
查看环境配置,在输出的内容中是否存在mod_rewrite
,存在就不需要进行设置。 - 如果不存在就在
apache
安装目录中找到httpd.conf
文件,把LoadModule rewrite_module
前面的“#”号去掉。 - 如果没有找到
LoadModule rewrite_module
就添加上LoadModule rewrite_module modules/mod_rewrite.so
,然后重启apache
服务
让apache
支持.htaccess
文件
修改httpd.conf
文件内容
Options FollowSymLinks
AllowOverride None
修改为
Options FollowSymLinks
AllowOverride All
修改完重启apache
服务
构建项目
vue开启history路由模式
使用webpack对项目build完成后,复制dist文件夹中的文件到web根目录
www
|--static
|--index.html
添加.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>
最终项目目录
www
|--static
|--.htaccess
|--index.html
在配置过程中需要注意的内容:build的文件中的内容需要放到web的根目录
在添加.htaccess
文件后服务端不会返回404页面,需要在前端定义404页面