vue-cli项目部署到Gitee Page
<blockquote><p>为什么不选择<code>Github Page</code>？原因很简单，因为Gitee不用FQ速度快！</p>
</blockquote>
<h3 id="1创建仓库">1.创建仓库</h3>
<p>这步比较简单，就不做演示了；</p>
<h3 id="2添加vueconfigjs文件">2.添加vue.config.js文件</h3>
<p>由于使用<code>vue-cli3</code>创建的项目隐藏了<code>webpack</code>的配置，所以需要该文件来修改部分的<code>webpack</code>配置。文件内容如下：</p>
<pre><code class="language-js">// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/vue-div-ui/'
: '/'
}
</code></pre>
<p><code>vue-div-ui</code>指的是Gitee上对应的仓库名；</p>
<p><strong>注意：</strong>在根目录下添加该文件；</p>
<h3 id="3创建自动化脚本deploysh">3.创建自动化脚本deploy.sh</h3>
<p>同样的，在根目录创建一个脚本文件<code>deploy.sh</code>，用于将代码打包和代码推送等指令进行整合：</p>
<pre><code class="language-js"># `deploy.sh`
# 当发生错误时中止脚本
set -e
# 构建
npm run build
# cd 到构建输出的目录下
cd dist
git init
git add -A
git commit -m 'update commit'
git remote add origin https://gitee.com/ahuntsun/vue-div-ui.git
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f origin master
cd -
</code></pre>
<h3 id="4在packagejson中添加scripts">4.在package.json中添加scripts</h3>
<p>为了通过<code>npm</code>执行<code>deploy</code>这个脚本文件，需要在<code>package.json</code>中新增<code>scripts</code>配置：</p>
<pre><code class="language-js">"scripts": {
"deploy": "bash deploy.sh"
},
</code></pre>
<p>随后便可以在项目的根目录下通过执行</p>
<pre><code class="language-js">npm run deploy
</code></pre>
<p>完成脚本文件中设置的项目打包，推送等一系列操作了，十分方便：</p>
<p><img src="http://ahuntsun.gitee.io/blogimagebed/img/gitee-page/1.png" alt="image-20200820012418686" loading="lazy"></p>
<p><img src="http://ahuntsun.gitee.io/blogimagebed/img/gitee-page/2.png" alt="image-20200820012428447" loading="lazy"></p>
<h3 id="5注意点">5.注意点</h3>
<p>如果项目涉及到路由跳转，最好关闭<code>history</code>模式，因为<code>Gitee Page</code>可能不支持该模式；</p>
<blockquote>
<p>部署到Github Page的步骤类似！</p>
</blockquote>
</div>
<div id="MySignature" role="contentinfo">
多抽出1分钟来学习，让你的生命更加精彩！<br><br>
来源：https://www.cnblogs.com/AhuntSun-blog/p/13532820.html
頁:
[1]