修改 src/router/index.ts 路由配置文件 import type { RouteRecordRaw } from 'vue-router'

import { createRouter, createWebHashHistory } from 'vue-router'

const routes: RouteRecordRaw[] = [...]

const router = createRouter({

// 修改为 hash 模式

history: createWebHashHistory(),

routes

})

export default router

打包当前项目 进入项目目录下，执行下面的脚本 npm run build

然后等待项目打包成功，打包后的文件保存在项目根目录下的 dist 文件夹中 打开 GitHub，登录帐号，创建新仓库 然后进入保存项目打包代码的 dist 目录下，执行下面的命令 # 1. 初始化一个 git 仓库

git init

# 2. 暂存所有文件

git add .

# 3. 提交暂存文件到本地仓库

git commit -m "组件库开发完成"

# 4. 添加 github 远程仓库链接

git remote add origin https://github.com/YZhiJie/coderyzj-element-components-web.git

# 5. 重命名当前主分支

git branch -M main

# 6. 将本地 git 仓库代码推送到指定的 github 远程仓库 orgin 的 main 分支中

# -u 表示设置上流分支，就是为当前分支绑定对应要上传的远程分支，之后就可以通过 git push 直接提交

git push -u orgin main

执行完 git push 命令之后，等待上传完成，然后打开对应的 github 仓库，刷新页面，即可看到刚刚上传的代码 部署项目到 Github Pages 中

官方参考文档：GitHub Pages 使用入门 - GitHub 文档

保存完成之后，刷新页面 注意：由于 dist 目录下保存打包好的静态资源的引入路径为 /，所以会导致静态资源没有被找到，所以需要配置一个 basePath

官方文档：构建生产版本 | Vite 官方中文文档 (vitejs.dev)

vite.config.ts

import { defineConfig } from 'vite'

// https://vitejs.dev/config/

export default defineConfig({

// 如果你需要在嵌套的公共路径下部署项目，只需指定 base 配置项

base: 'coderyzj-element-components-web',

// ...

})

然后重新执行 npm run build 打包项目，dist/index.html 的内容就如下所示

二次封装 element-plus

可以看到每一个引入的静态资源路径前都被添加了配置的 base 公共路径

此时，将更新的代码推送到 github 对应仓库的 main 分支中，再次刷新刚刚部署的 github pages 页面网址，即可正常访问该项目

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：