vue使用history模式在apache服务中的路径配置

• 前期准备
  • 检查apache是否支持mod_rewrite
• 构建项目
  • vue开启history路由模式
  • 添加.htaccess文件
• 最终项目目录

现在单页面应用比较流行，使用单页面应用可以使页面运行的很流畅，访问起来有一个更好的用户体验，页面在使用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页面