如何应用 gh-pages 部署 vue 利用?

应用 webpack5 实现了微前端,心愿能把这些利用部署到 git-pages, 如何办呢?

webpack5 模块联邦实现微前端

gh-pages 是什么?

gh-pages 是 github 提供给我的项目、组织等托管动态页面的服务,可应用这项服务托管我的项目介绍页面、应用文档和组织介绍、个人简历等。

如何部署到 gh-pages?

参考这个。

How to deploy React App to GitHub Pages

还可与 CI CD 工具联合,实现主动部署,相干操作可执行搜寻。

部署后的成果

如何解决切换路由后刷新浏览器 404 ?

设置两个中央

  1. 把仓库名字作为根底门路
const isProd = process.env.NODE_ENV === 'production'const history = isMemoryHistory  ? createMemoryHistory(basePath)  : createWebHistory(isProd ? '/vue3-dashboard' : undefined) // 生产环境才设置根底门路// vue3-dashboard 是我的项目名字
  1. 设置自定义谬误页面

增加一个 404.html,内容和 index.html一样当找不到门路时,会渲染 404.html.

每次复制文件也麻烦,我是每次执行部署,脚本执行胜利后复制 index.html 为 404.html

 "build": "webpack --config config/webpack.prod.js --progress", "postbuild": "cp dist/index.html dist/404.html", "predeploy": "npm run build", "deploy": "gh-pages -d dist"

其余解决办法:

应用 hash 模式,而后依据这个设置一下 部署 vue 到 GitHub Pages:404 頁面

我没试过,不晓得是否胜利。

我还试了单页利用在 gh-pages 动静路由刷新后 404 解决方案,没胜利。

更多办法,参考
How to fix HTTP 404 on Github Pages?

react 我的项目如何解决 404 问题?

尝试了 vue 相似的解决办法,没胜利,要是你有个更好的方法,感激通知我。