vue项目打包后想发布在apache www/vue 目录下

最新推荐文章于 2024-08-28 09:26:53 发布

转载最新推荐文章于 2024-08-28 09:26:53 发布 · 1.3k 阅读

文章标签：

#vue

本文详细介绍了如何将基于vue-element-admin的项目通过Apache部署至子目录的过程，包括配置vue-router的base路径、调整webpack的publicPath、启用Apache的rewrite_module及设置.htaccess规则，确保项目在子目录下正确运行。

https://segmentfault.com/a/1190000012548105

使用的是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根目录，或更深的目录，只需要对应的修改即可。第一点比较重要，参考项目的文档上也没有说明，加上不够细致，对新手还是有门槛的。

希望这篇文档帮助更多人。。。