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

  • A+
所属分类:前端工程

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

  • 公众号
  • 扫一扫
  • weinxin
  • 打赏
  • 扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: