GitHub Pages 部署 vue 项目小记

91 阅读1分钟

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

1. 创建 gh-pages 分支

首先创建 gh-pages 分支,接着就可以在 Settings -> Pages 里面看见该分支

image.png

image.png

2. 更新 gh-pages 分支

2.1 配置 vite.config.ts
    // 为保证访问路径的正确性,需要配置base路径
    export default defineConfig({
        // 将根路径换成相对路径
        base: "./",
        plugins: [vue()],
        resolve: {
            alias: {
                "@": fileURLToPath(new URL("./src", import.meta.url)),
            },
        }
    });
2.2 打包文件后,把 dist 目录下的文件拷贝到 gh-pages 分支下,并提交代码
    npm run build

image.png

3. 访问链接

image.png