Vue项目打包部署到Gitee Pages配置教程（无空白bug）

仓库目录结构

我的仓库目录如下图，其他目录结构配置可能会有所不同哈

项目打包配置

vue.config.js

我的项目为vue2+Vue-Cli 4，在vue.config.js中加入以下代码：
（如没有此文件自己创建一个）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/vue2-project/',    //gitee远程库名
  outputDir: 'dist/',
  assetsDir: 'static/'
})
1
2
3
4
5
6
7

比如我的gitee仓库名字叫vue-project，那么publicPath就是vue2-project，因为Gitee Pages部署后的路径为https://用户名.gitee.io/仓库名

npm run build打包

使用npm run build进行打包，然后使用Git命令把代码推送到仓库

Gitee Pages的使用

在仓库页面找到Gitee Pages，
此服务需要实名认证，且审核需要时间，赶时间的同学记得先申请！！！

按如下配置，因为我这里是整一个Vue项目的仓库，如果仓库里只有dist代码的话，部署目录那里可以不管

然后访问部署后的地址，就可以看到页面啦~~

本文到此就结束啦，如果有什么问题可以在评论区留言。
觉得不错的话，可以打赏一下喔~~