vue3 vite打包之后访问不显示页面

报错内容

index-DT1kpfkt.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

解决办法：

1、安装 @vitejs/plugin-legacy -D

npm i @vitejs/plugin-legacy -D

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
})

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

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

再次打包访问，如果还是不行的话就在打包完成后的 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>