前置知識
1、要在github部署項目要提交打包后的靜態文件(html,css，js)到倉庫里
2、我們看下github所提供給我們的部署方式有啥，如下所見；
要么是/root文件夾（就說倉庫里全是打包后的產物：html,css，js要全部放到根目錄下，根目錄下盡量不要有其他多余的靜態文件）
要么是/docs文件夾(就是打包后的產物：html,css，js要全部放到/docs下，根目錄下可以有其他多余的靜態文件，他去了docs里找靜態文件去了，不影響)
3、如果你在github要部署多個項目，如何解決呢？倉庫名來做區分。
? ? ? ? 比如部署了兩個項目到github,A和B，它兩都有相同的打包產物css:demo.css
? ? ? ? github會如何請求呢?
//A項目
https://username.github.io/A/demo.css
//B項目
https://username.github.io/B/demo.css一 、 單個html要發布，使用前置知識里的/root方式
根html要用index.html命名才可以
如果有額外的css文件要在引入到html里的路徑里加上倉庫名稱
比如倉庫名稱是githubhtml
<link rel="preload stylesheet" href="/githubhtml/vp-icons.css" as="style">
經過多次試驗，代碼改變后會自動發布新包，但是由于網絡和緩存的問題，需要等待和強制刷新才可以看到最新的結果
二、vitepress項目
npm init -y
npm i -D vitepress
npx vitepress init根據前置知識2和3對vitepress的打包產物進行改造，這里使用的是前置知識里的/docs方式。在.vitepress\config.mts里添加
export default defineConfig({ base:"/github倉庫名稱/", outDir:"docs",
})1、解釋下：base；如果你的倉庫名稱是ssg，修改base為"/ssg/" 打包后的html里的各種資源路徑會自動加上"/ssg/"前綴 如：
<link rel="stylesheet" href="/ssg/style.css">
部署后的請求則是
https://用戶名.github.com/ssg/style.css如果為"/" 則，
<link rel="stylesheet" href="/style.css">
部署后的請求css路徑就是
https://用戶名.github.com/style.css //報錯2、解釋下：outDir；outDir:"docs"的作用是打包后的文件放在根目錄docs中 如果是outDir:"dist/demo" 則打包后的文件放在dist/demo中
然后執行npm run docs:build 會在根目錄下生成docs目錄，里面就是打包后的文件，這個文件是一定要提交到倉庫的
三、vite/webpack項目，和vitepress部署一樣的(使用/docs)，再加一種方式（/root）
1、如果用/docs部署，改造打包后的產物，在vite.config.ts文件中添加，打包，提交代碼，使用/docs方式發布
//vite
export default defineConfig({base:"/github倉庫名/",build: {outDir: "docs",},
})webpack
//webpack.config.js
const path = require('path');module.exports = {// 等價于Vite的base選項output: {publicPath: '/github倉庫名/',path: path.resolve(__dirname, 'docs'), // 等價于Vite的outDir},
};vuecli腳手架
vue.config.js
module.exports = {// 等價于Vite的base選項publicPath: '/github倉庫名/',// 等價于Vite的outDir選項outputDir: 'docs',
};2、用/root部署
改造打包后的產物，注意這里的outDir是build
//vite
export default defineConfig({base:"/github倉庫名/",build: {outDir: "build",},
})安裝插件
npm i gh-pages -D添加命令
"scripts": {"deploy": "gh-pages -d build"},解釋下這個deploy命令的作用是啥
1.把build文件夾下的文件全部復制到gh-pages分支下
2.把gh-pages分支下的文件推送到github倉庫
然后依次執行npm run build，npm run deploy
執行后會有如下代碼，說明發布成功了
$ npm run deploy> vite-web@0.0.0 deploy
> gh-pages -d buildPublished
查看倉庫會多出一個分支gh-pages，里面全是干凈的打包的后（html,css，js）文件
然后就可以使用root發布了
)
