把 Vite 项目部署到 Github Pages 其实很简单，具体步骤如下
首先在你要部署的项目下，安装 gh-pages 包：
1
| npm install gh-pages --save-dev
|
接着打开 vite.config.js 文件，设置你的 Base URL：在 base 配置项里填写 /你的 Github 仓库名/，举个例子，如果我的仓库名叫 vite-react-project，那这里就填 /vite-react-project/。
1
2
3
4
5
6
7
| import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
base: "/vite-react-project/",
plugins: [react()],
});
|
然后在 package.json 文件里，补充上 deploy 命令（具体命令需根据项目实际情况配置，常见配置可参考官方示例，核心是通过 gh-pages 包推送构建产物）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| {
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
|
最后执行以下命令，触发部署：
部署命令执行完成后，进入你的 Github 仓库（Repo），点击顶部的 Settings 选项，再在右侧菜单中找到 Pages 选项。
这样就能看到你的项目已经部署成功了。如果没看到对应的网址，不用着急，稍等一会儿就行 ——deploy 操作完成后，网址不会立刻显示出来。
额外步骤
vite.config.ts 使用自定义域名时，资源基础路径应为根路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ...
export default defineConfig(() => ({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
base: '/',
server: {
host: '127.0.0.1',
port: 5173
},
...
|
404.html 将非哈希路由的直链（/xxx）重定向为哈希路由（/#/xxx），用于 GitHub Pages 刷新兼容
1
2
3
4
5
6
7
8
9
10
11
12
13
| ...
<meta http-equiv="refresh" content="0; url=/" />
<script>
(function () {
var base = '/';
var path = window.location.pathname;
var rest = path.slice(base.length);
var search = window.location.search || '';
var hash = window.location.hash || '';
var target = base + '#/' + rest.replace(/^\//, '') + search + hash;
window.location.replace(target);
...
|
src/App.tsx 使用 HashRouter，避免 GitHub Pages 对子路径返回 404
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { Provider } from 'jotai';
import React, { Suspense } from 'react';
import { Route, HashRouter as Router, Routes } from 'react-router-dom';
import { GlobalErrorProvider } from './components/ui/GlobalErrorProvider';
import { MainPage } from './pages/MainPage';
@@ -13,6 +13,7 @@ function App() {
return (
<Provider>
<GlobalErrorProvider>
{}
<Router>
<Routes>
<Route path="/" element={<MainPage />} />
|
src/containers/MainPageContainer.tsx 使用完整路径，解决无法访问问题
1
2
3
4
5
6
7
| const [showResumeSettings, setShowResumeSettings] = useState(false);
const handlePreview = () => {
window.open('./preview', '_blank');
};
const handleClear = () => {
|
评论