首页 Vue

# 利用 github page 托管 vue 项目

  1. 设置好 vite.config.js

在 vite.config.js 中设置正确的 base。

如果你要部署在 https://<USERNAME>.github.io/ 上，你可以省略 base 使其默认为 ‘/’ 。
如果你要部署在 https://<USERNAME>.github.io/<REPO>/ 上，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO> ，那么请设置 base 为 ‘/<REPO>/’ 。

  1. 构建项目
h
npm run build
# 或者
yarn build

执行上述命令后，就会看到根目录下，多了一个 dist 文件夹，这便是我们需要部署的文件夹。

3. 预览项目

h
npm run dev
  1. 部署到 github
    如果上面的 preview 没有问题，就可以部署到 github 了。

在 github 中，项目的源代码上传到了 main 分支，因此接下来要将 dist 文件夹上传到另外一个分支，给这个分支起个名字 gh-pages。

这里将 dist 文件夹上传到 gh-pages：(执行这条命令的前提是你已经完成了 git add. git commit git push 这些操作。)

h
git subtree push --prefix dist origin(远程主机的名字) gh-pages
  1. 开启 pages 功能
    将分支切换到 gh-pages，然后 save，就能成功开启页面了！