gitee pages 部署 Vue 单页应用注意事项

1. 在项目根目录下添加 .spa 文件，内容为空，主要是为了用于自动切换 Nginx 的 404 配置，详情。

2. 修改 vue.config.js 配置中的 publicPath 配置：

const BASE_URL = process.env.NODE_ENV === "production" ? "/yourProjName/" : "/";
module.exports = {
  publicPath: BASE_URL,
}

解释：当变量 process.env.NODE_ENV 为生产环境时，将 BASE_URL 设置为项目名称，这是因为使用 gitee pages 部署的应用，默认根路径为 http://xxx.gitee.io/，如果不修改 publicPath ，则你的应用中的资源请求都将会从根路径去找，结果就是出现 404，找不到你的资源，因为你的资源都存放在 http://xxx.gitee.io/ 下面的项目目录中，比如你在 gitee 上的项目名称为 myblog，那么上面代码中的 "/yourProjName/" 就应为 "/myblog/"，如下：

const BASE_URL = process.env.NODE_ENV === "production" ? "/myblog/" : "/";

3. 将项目中使用了 / 开头的绝对路径写法去引用 public 静态资源的 URI 改掉。如果是写在 Html 部分 里面的，则可以直接将打头的 / 去掉，如 改为 。如果写在 Css 部分 里面的，如 background: url("/img/test.jpg")，那你还是把 public 里面对应的资源挪到 asstes 下面吧……因为我也没找到其他解决办法 ε=(´ο｀*)))唉

4. 关闭 vue-router 的 history 模式，如果你使用了 vue-router 并且启用了 history 模式，打开对应的配置文件，关闭它！因为如果你使用了 history 模式，燃鹅，你只是一个前端静态应用，部署在 gitee pages 服务上之后，没有后端的支持，当你打开某个经过路由的组件之后，再刷新页面，或者将当前 URI 用新浏览器窗口打开，┗|｀O′|┛ 嗷~~ 404 找不到这个页面了！！！没有后端的支持，gitee pages 会将你的 URI 当做真实的资源地址去请求资源，但实际这个地址只是前端路由之后的伪资源地址，sooooooooo

5. 修改 .gitignore 文件，注释掉 /dist，因为我们最终部署上去的应用，就在这里面，所以我们必须将它上传到 gitee

.DS_Store
node_modules
# /dist

...

6. biuld 你的项目，执行 npm run biuld 命令，编译你的项目，编译完成之后，提交你的项目

7. 登录你的 gitee ，打开你的项目版本库页面，在页面顶部有一排选项 [ 代码 | Issues | ... | DevOps | 服务 | 管理 ]，点开服务，第一个选项就是Gitee Pages，点它！之后打开的页面中 部署分支：根据自己的版本库情况进行选择，部署目录：填写上面说到的 dist，原因我就不说了。

8. 如果你一切顺利，那么你应该已经部署成功了，在部署页面上会显示一行字：已开启 Gitee Pages 服务，网站地址： http://xxx.gitee.io/xxx。那就恭喜啦！

【注意】第 3 步是根据我的项目情况进行修改的，可能不适用于所有项目情况

纯手工制作，码字不易，如果有帮到你，点个赞再走呗