vue項目打包後想發佈在apache www/vue 目錄下

vue項目打包後想發佈在apache www/vue 目錄下

使用的是vue-element-admin做示例，可以參考Vue項目根據不同運行環境打包項目，其他項目應該大同小異。

使用vue-router的browserHistory模式，配置mode: 'history', 有更好的體驗。

目的： 想將項目打包後發佈到apache的www下的vue子目錄

先講結論：

1. 需要修改router/index.js中new Router 配置，加一個base: '/vue/', 它指定應用的基路徑，該應用是服務於localhost/vue路徑下，所以必須加base配置，否則應用會展示404頁面
2. 需要修改config/index.js中build下的assetsPublicPath: '/vue/'，如果用相對路徑，chunk文件會報錯找不到。

3. 修改httpd.conf文件，開啓rewrite_module功能。

   • LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#。
   • 然後找到AllowOverride None的那行，把它改成AllowOverride All，來使.htaccess文件生效。
4. 在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根目錄，或更深的目錄，只需要對應的修改即可。第一點比較重要，參考項目的文檔上也沒有說明，加上不夠細緻，對新手還是有門檻的。

希望這篇文檔幫助更多人。。。

原文地址：https://segmentfault.com/a/1190000012548105