vue cli3项目发布在apache www/vue目录下并配置history路由

Posted 2021-11-27 zhangruiqi

注意：vue项目打包后默认是指向服务器的根路径（比如apache默认www目录是根路径，当然也可以修改），这种情况不需要做路径的配置，只需要做history配置，如果不是发布到根路径而是www/vue目录下，则需要做路径配置，并做history配置

　　 一、 需要修改router.js中new Router 配置，加一个 base: ‘/vue/‘, 它指定应用的基路径，默认是根路径‘/‘，表示该应用是服务于localhost/vue路径下，所以必须加base配置，否则应用会展示404页面，当然了用history路由的话也必须加 mode: ‘history‘；

　　二、 在vue.config.js的 module.exports = { publicPath: ‘/vue/‘ };  , 默认根路径‘/‘
　　三、 修改httpd.conf文件，开启rewrite_module功能:　　

　　　　1. LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#，打开注释。一般搜索 mod_rewrite.so 能够找到，不同的服务器可能前面的红色路径不太一样

　　　　2. 找到  AllowOverride None 的那行，把它改成 AllowOverride All，来使  .htaccess 文件生效。

　　四、 在apache 的www/vue 目录下新建  .htaccess文件（此文件是看不到目录的但是在命令行貌似可以查到）, 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报404错误

             .htaccess文件内容

　　　　　　<IfModule mod_rewrite.c>
　　　  　　　　 RewriteEngine On
　　　　　　　　RewriteBase /
　　　　　　　　RewriteRule ^index\.html$ - [L]
　　　　　　　　RewriteCond %{REQUEST_FILENAME} !-f
　　　　　　　　RewriteCond %{REQUEST_FILENAME} !-d
　　　　　　　　RewriteRule . /vue/index.html [L]
　　　　　　</IfModule>

 

发布到其他路径或是更深的路径配置都是类似的

参考：https://segmentfault.com/a/1190000012548105