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

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

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