vue3 使用 vite 构建的项目打包后无法访问

解决办法：
1、安装 @vitejs/plugin-legacy -D

npm i @vitejs/plugin-legacy -D
1

2、vite.config.js 添加配置

import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    vue(),
  ],
  base:'./', // https://cn.vitejs.dev/config/shared-options.html#base
})
1
2
3
4
5
6
7
8
9
10

3、将路由模式换成 hash 路由

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

再次打包访问，如果还是不行的话就在打包完成后的 index.html 文件的末尾加上以下代码

<script>
  (function (win) {
    let src = document.getElementsByTagName('script');
    for(let i = 0; i < src.length; i++) {
      let script = src[i];
      let url = script.getAttribute("src");
      let type = script.getAttribute("type");
      let scriptText = script.innerHTML;
      if (url || type === "module") {
        let tag=document.createElement('script');
        tag.setAttribute('url',url);
        tag.innerHTML = scriptText;
        script.remove();
        document.getElementsByTagName('head')[0].appendChild(tag);
      }
    }
  })(window)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19