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

时间 2020-07-16

标签 vue 项目打包后想发布 apache www 目录栏目 Apache 繁體版

原文原文链接

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

&lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /vue/index.html [L]
&lt;/IfModule&gt;

<p>放到www根目录，或更深的目录，只须要对应的修改便可。第一点比较重要，参考项目的文档上也没有说明，加上不够细致，对新手仍是有门槛的。 </p> <p>但愿这篇文档帮助更多人。。。</p>vue

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