聆听风声 点点滴滴都很珍贵!

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

2019-03-21
web

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


Comments

Content