使用的是vue-element-admin 做示例,其他项目应该大同小异。
使用vue-router
的browserHistory模式,配置mode: 'history'
, 有更好的体验。
目的: 想将项目打包后发布到apache的www下的vue子目录
先讲结论:
- 需要修改
router/index.js
中new Router
配置,加一个base: '/vue/'
, 它指定应用的基路径,该应用是服务于localhost/vue
路径下,所以必须加base
配置,否则应用会展示404页面 - 需要修改
config/index.js
中build下的assetsPublicPath: '/vue/'
,如果用相对路径,chunk文件会报错找不到。 修改
httpd.conf
文件,开启rewrite_module功能。-
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
,去掉前面的#。 - 然后找到
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>
放到www根目录,或更深的目录,只需要对应的修改即可。第一点比较重要,参考项目的文档上也没有说明,加上不够细致,对新手还是有门槛的。
希望这篇文档帮助更多人。。。