Vue CLI 3.x 是 Vue.js 开发环境的脚手架工具，它简化了构建 Vue 应用的过程。本文将详细讲解如何将 Vue CLI 3.x 项目部署到 GitHub Pages 上，以便于展示或分享你的纯静态项目。
1. **关于 GitHub Pages**
GitHub Pages 是 GitHub 提供的一项免费服务，用于托管静态网页。你可以使用它来创建个人博客、展示项目或发布其他类型的静态内容。创建一个名为 `<username>.github.io` 的仓库，其中 `<username>` 是你的 GitHub 用户名，仓库就会成为你的个人站点。
2. **不要开启 Vue Router 的 History 模式**
Vue Router 的 History 模式可以去除 URL 中的 `#` 符号，使路由看起来更美观。然而，在 GitHub Pages 上，由于它不支持服务器端配置，History 模式的路由可能会导致页面加载失败。所以，对于 GitHub Pages 部署，建议使用默认的 Hash 模式。
3. **配置 `publicPath`**
在部署过程中，需要确保静态资源能正确引用。在 `vue.config.js` 文件中，设置 `publicPath`，使其指向你的 GitHub Pages URL 的子路径。例如，如果项目仓库是 `https://github.com/nusr/resume-vue`，并且你想部署到 `https://nusr.github.io/resume-vue`，则 `publicPath` 应设置为 `/resume-vue/`。
```javascript
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/resume-vue/" : "/"
};
```
4. **处理 CSS 中的图片引入**
当项目部署到 GitHub Pages 后，CSS 中的背景图片可能无法正常显示。这是因为它们的相对路径在新环境中不再有效。一种解决方法是在 `mounted` 生命周期钩子中根据环境动态添加类名，然后在 CSS 中根据这些类名来调整图片路径。
```html
<!-- App.vue -->
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "App",
mounted() {
const { NODE_ENV } = process.env;
document.documentElement.className = NODE_ENV;
}
};
</script>
<style lang="less">
@import "~@/assets/global.less";
</style>
```
然后在 `global.less` 中定义不同环境下的 CSS：
```less
.development {
background-image: url(/https/download.csdn.net/background.png);
}
.production {
background-image: url(/https/download.csdn.net/resume-vue/background.png);
}
```
5. **创建自动部署脚本**
创建一个名为 `deploy.sh` 的文件，用于自动化部署流程。这个脚本会执行 `npm run build` 来打包项目，然后初始化 Git 仓库，添加所有文件，提交并推送到 GitHub Pages 分支。
```bash
# deploy.sh
# 错误时停止
set -e
# 打包
npm run build
# 进入目标文件夹
cd dist
# 提交到本地仓库
git init
git add -A
git commit -m 'deploy'
# 提交到 https://github.com/nusr/resume-vue 项目的 gh-pages 分支
git push -f [email protected]:nusr/resume-vue.git master:gh-pages
cd -
```
运行此脚本 (`bash deploy.sh`) 即可完成部署。
6. **启用 GitHub Pages**
在你的仓库设置中，找到 GitHub Pages 部分，选择 `gh-pages` 分支作为源，并指定自定义域名（如果有的话）。然后，你就可以通过 `https://<username>.github.io/<repository-name>` 访问你的项目了。
总结，部署 Vue CLI 3.x 项目到 GitHub Pages 需要注意的几点包括：避免使用 History 模式，正确配置 `publicPath`，处理 CSS 图片路径，创建自动化部署脚本，并在 GitHub 页面设置中启用服务。遵循这些步骤，你可以轻松地将 Vue 项目部署到 GitHub Pages 上，与他人分享你的成果。
