部署到 github page 出现的问题

新建一个 gh-page 分支，将 npm run build 之后的产物上传到 github，

因为 folder 只能选择 root 和 docs，修改 vite 配置，把产物放到 docs 目录下

选择分支和目录即可

问题

部署后访问，发现出现 Failed to fetch dynamically imported module

找不到动态引入的模块

未解之谜

从各个博主的博客以及文档搜索查看后，在确定import 路径正确且相关文件存在的前提下尝试修复

1、在 router.onError 的时候 重新 reload 一下页面，不行，会出现一直 reload 的问题（有博主说加了这个之后没有再出现问题）

2、看文档说可以使用 await 尝试后没有什么作用，依然会报错

3、使用 defineAsyncComponent 注册异步组件，问题还是没解决

且 开发环境控制台会有 warning 提示

Component "default" in record with path "/system/permission" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".

4、看到有博客说是 setup 语法糖引起的问题，尝试替换为选项式 API，也不行

5、不使用 import.meta.glob 或者()=>import()的形式动态引入，直接在顶部 import from 部分组件，部署后就可以了，连同那些动态引入的模块也可以，怀疑难道真的是 github 的访问不稳定的问题？？？

又全部换成 动态引入 形式测试，部署后又回到了原点【捂脸.jpg】

TIPS: 需要注意 router base 的问题，部署到 github page 之后，路径有会带项目名，加上 router base 路径跳转才会正确

部署到 gitlab page 遇到的问题

因为怀疑是 github 的访问问题导致 Failed to fetch dynamically imported module，所以部署能够稳定访问的 gitlab 上（不部署 gitee 是因为实名认证有点麻烦）

部署到 gitlab 则不需要 router base 了，去掉 router base 能正常访问

新问题

1、登录页面白屏，手动添加 cookie 之后进入页面，其他组件访问都很正常，唯独登录页面白屏，且控制台什么信息也没有，检查发现是文件目录的大小写问题导致，修改后可以正常访问

至此，仍然不确定github page 的 Failed to fetch dynamically imported module问题是什么导致的

自动构建

从网上找的

image: node:latest

stages:
  - build
  - deploy

build:
  stage: build
  only:
    - deploy # 只在deploy分支执行
  script:
    - npm install
    - npm run build

pages:
  stage: deploy
  only:
    - deploy
  script:
    - rm -rf public
    - mkdir public && cp -rf dist/* public
  artifacts:
    paths:
      - public
    expire_in: 30 days

cache:
  paths:
    - node_modules
    - dist

github page

gitlab page