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

使用的是vue-element-admin 作示例，其餘項目應該大同小異。

使用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根目錄，或更深的目錄，只須要對應的修改便可。第一點比較重要，參考項目的文檔上也沒有說明，加上不夠細緻，對新手仍是有門檻的。

但願這篇文檔幫助更多人。。。