霍森布鲁兹 發表於 2019-10-11 11:24:00

3.部署到gitee

<p>&nbsp;</p>
<div class="title" data-v-5a68110b="">
<div data-v-5a68110b="">gitee官网：https://gitee.com/</div>
</div>
<p>&nbsp;</p>
<div data-v-5a68110b="">
<div data-v-5a68110b="">步骤一：在根目录下新建一个 .spa 空文件；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">原理：通过在根目录下增加.spa文件，Gitee Pages服务器的Ngnix规则就会变为：</div>
<div data-v-5a68110b="">
<div class="cnblogs_code">
<pre>try_files $uri $uri.html /index.html $uri/ -404</pre>
</div>
<p>此时，即可开启支持单页应用（即不用再去写前端代码通过404.html重定向请求，而是将请求全部导向应用入口index.html实现单页请求）；</p>
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112808401-1274673431.png"></p>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤二：修改 .gitignore 文件；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">原理：代码提交的时候，.gitignore文件默认的配置是将打包文件dist隐藏，但是后面发布的时候需要用到dist文件，所以需要将dist隐藏的配置去掉；</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112839904-1254185609.png"></p>
<p>&nbsp;</p>
<p>步骤三：修改路由设置，改为hash模式（路径：src/router/index.js）；</p>
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112855971-430515210.png"></p>
<p>&nbsp;</p>
<p>步骤四：修改publicPath（其中myweb是库的名字）；</p>
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112907395-342723760.png"></p>
<p>情况一：如果没有vue.config.js文件，但是有webpack.base.conf.js文件，publicPath改写如下：</p>
<div class="cnblogs_code">
<pre>publicPath: process.env.NODE_ENV === "production" ? "/myweb/" : "./", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">myweb是库的名字</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112926183-655423590.png"></p>
<p>&nbsp;情况二：如果有vue.config.js文件，按下面替换：</p>
<div class="cnblogs_code">
<pre>const path = require('path'<span style="color: rgba(0, 0, 0, 1)">)
const resolve </span>= dir =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> path.join(__dirname, dir)
}
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> publicPath: './',</span>
publicPath: '/myweb/' <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">库的名字,</span>
chainWebpack: config =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
    config.resolve.alias.set(</span>'_c', resolve('src/components')) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> key,value自行定义，比如.set('@@', resolve('src/components'))</span>
<span style="color: rgba(0, 0, 0, 1)">},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出文件目录</span>
outputDir: 'dist'<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤五：build/util.js 中添加：publicPath: "../../"；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">原理：为了解决css/字体访问不到的问题；</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112948006-459529633.png"></p>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤六：config/index.js 中 build 里面的 assetsPublicPath: '/'改为assetsPublicPath: './'；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">原理：为了解决js访问不到的问题；</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706112957363-2013441096.png"></p>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤七：保证代码在根目录下（即代码跟 .git 同级），然后执行npm run build打包；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">原理：此时，在根目录下会生成一个dist文件夹，其中包含了index.html文件和一些压缩的css、js文件；</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706113008944-2124955612.png"></p>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤八：代码上传至gitee；</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">执行：git add .</div>
<div data-v-5a68110b="">执行：git commit -m "submit"</div>
<div data-v-5a68110b="">执行：git push</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706113019320-1860710364.png"></p>
<p>&nbsp;</p>
<div data-v-5a68110b="">步骤九：打开Gitee：https://gitee.com/</div>
<div class="left" data-v-5a68110b="">
<div data-v-5a68110b="">选择好分支及自己的打包目录</div>
<div data-v-5a68110b="">
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706113030078-1644993348.png"></p>
<p>&nbsp;</p>
<p><img src="https://img2023.cnblogs.com/blog/986887/202307/986887-20230706113036008-1757748472.png"></p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</div>
<p><span style="background-color: rgba(255, 255, 0, 1)"><strong>&nbsp;</strong></span></p>

</div>
<div id="MySignature" role="contentinfo">
    <p>转载请注明原文链接：https://www.cnblogs.com/chenJieLing/</p><br><br>
来源：https://www.cnblogs.com/chenJieLing/p/11653080.html
頁: [1]
查看完整版本: 3.部署到gitee