- 修改
src/router/index.ts路由配置文件importtype{ RouteRecordRaw }from'vue-router'import{ createRouter, createWebHashHistory }from'vue-router'const routes: RouteRecordRaw[]=[...]const router =createRouter({// 修改为 hash 模式 history:createWebHashHistory(), routes})exportdefault router - 打包当前项目进入项目目录下，执行下面的脚本
npm run build然后等待项目打包成功，打包后的文件保存在项目根目录下的dist文件夹中 - 打开 GitHub，登录帐号，创建新仓库
然后进入保存项目打包代码的 dist目录下，执行下面的命令# 1. 初始化一个 git 仓库git init# 2. 暂存所有文件gitadd.# 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/exportdefaultdefineConfig({// 如果你需要在嵌套的公共路径下部署项目，只需指定 base 配置项
base:'coderyzj-element-components-web',// ...})
然后重新执行
npm run build
打包项目，
dist/index.html
的内容就如下所示
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="icon"href="/coderyzj-element-components-web/favicon.ico"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>二次封装 element-plus</title><scripttype="module"crossoriginsrc="/coderyzj-element-components-web/assets/index-8Ikk6kU4.js"></script><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/elementPlus-bnWr50qM.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/lodash-cloneDeep-1I6xJSx6.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/wangeditor-editor-2csuMDG6.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/wangeditor-editor-for-vue-3oNpnbmv.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/fullcalendar-core-_qEhocF-.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/fullcalendar-daygrid-w_SLoAZy.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/fullcalendar-interaction-VbRAWOIx.js"><linkrel="modulepreload"crossoriginhref="/coderyzj-element-components-web/assets/mockjs-IvM1AUGd.js"><linkrel="stylesheet"crossoriginhref="/coderyzj-element-components-web/assets/index-N-RgVmFB.css"></head><body><divid="app"></div></body></html>
可以看到每一个引入的静态资源路径前都被添加了配置的
base
公共路径
此时，将更新的代码推送到
github
对应仓库的
main
分支中，再次刷新刚刚部署的
github pages
页面网址，即可正常访问该项目
本文转载自: https://blog.csdn.net/yzjandyyyYYDS/article/details/136589966
版权归原作者 coderyzj 所有， 如有侵权，请联系我们删除。
版权归原作者 coderyzj 所有， 如有侵权，请联系我们删除。