前提环境

开发环境webstorm+vue3.4.31+vite4.4.0+pnpm10.4.1
浏览器:edge

需求

1. 服务器带宽不够,但是有oss
2. 域名只能指向服务器(因为有接口做了nginx反代)
3. index.html和静态资源(css、js等)分别放在服务器和oss上

实现

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico|js|css|woff2|json)$ {
    rewrite ^/(.*)$ http://oss地址/$1 permanent;
  }

到此为止 部署完成 发布 上线!!!

接下来是一个无底深坑

模拟环境配置

127.0.0.1:4444 模拟服务器
127.0.0.1:4445 模拟oss服务器

现象

页面可以访问 然后首页loading动画加载 然后没了…😔

问题分析

1. 路由没有匹配到?
2. 资源没有请求到?
3. 挂载点不存在?
4. 页面被隐藏了?
5. 页面不想出来?😀

接下来一个一个验证

1. “/“应该自动跳转”/index”
   
   实际上没有跳转
   
   打印路由日志
   
   惊不惊喜我匹配到了,但我就是不跳转 哈哈哈哈哈哈哈!

2. myAside.xxx.js 是首页的一个组件证明首页及首页的子组件产生了资源请求并请求到了

3. 挂载点存在 但他喵的为什么没有子元素!!!
   
   
   归根结底竟然是vue没有正确挂载
   
   这三个请求第一个是服务器到oss的重定向,第二个是向oss请求资源 第三个我也不知道是哪里来的
   那么好!问题就出在这里
   那么这个文件里有什么东西呢?
   大致瞄了一眼,有axios封装,有权限组件,有路由代码,当然还有最重要的main.js

axios防重复提交

路由改变的监听写在router.js

权限认证

以及最重要的main.js页面挂载!!!

问题就出现在这
vue机制中一个div能挂载多次吗?那肯定不能啊!

所以接下来很简单只需要将app.mount包裹在DOMContentLoaded事件中就好

document.addEventListener('DOMContentLoaded', () => {
  app.mount('#app')
});