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

<p>使用的是vue-element-admin作示例，能夠參考<a href="http://www.jqhtml.com/22752.html" target="_blank">Vue項目根據不一樣運行環境打包項目</a>，其餘項目應該大同小異。</p> <p>使用<code>vue-router</code>的browserHistory模式，配置<code>mode: 'history'</code>, 有更好的體驗。</p> <h3>目的： 想將項目打包後發佈到apache的www下的vue子目錄</h3> <h4>先講結論：</h4> <ol> <li>須要修改<code>router/index.js</code>中<code>new Router</code> 配置，加一個<code>base: '/vue/'</code>, 它指定應用的基路徑，該應用是服務於<code>localhost/vue</code>路徑下，因此必須加<code>base</code>配置，不然應用會展現404頁面</li> <li>須要修改<code>config/index.js</code>中build下的<code>assetsPublicPath: '/vue/'</code>，若是用相對路徑，chunk文件會報錯找不到。</li> <li> <p>修改<code>httpd.conf</code>文件，開啓rewrite_module功能。</p> <ul> <li> <code>LoadModule rewrite_module libexec/apache2/mod_rewrite.so</code>，去掉前面的#。</li> <li>而後找到<code> AllowOverride None</code>的那行，把它改爲<code>AllowOverride All</code>，來使<code>.htaccess</code>文件生效。</li> </ul> </li> <li>在apache 的<code>www/vue</code> 目錄下新建<code>.htaccess</code>文件, 須要修改<code>RewriteRule</code> 爲<code>/vue/index.html</code>, 不然刷新頁面服務端會直接報404錯誤。</li> </ol> <h4>.htaccess文件內容</h4>

<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>

<p>放到www根目錄，或更深的目錄，只須要對應的修改便可。第一點比較重要，參考項目的文檔上也沒有說明，加上不夠細緻，對新手仍是有門檻的。 </p> <p>但願這篇文檔幫助更多人。。。</p>

原文地址：http://www.javashuo.com/article/p-uasrtzng-ku.html