解决vite构建下 disthtml 无法打开问题

解决vite构建下 dist/html 无法打开问题

安装 兼容插件 @vitejs/plugin-legacy

npm install --save-dev @vitejs/plugin-legacy

在 vite.config.js 中进行配置

import legacy from '@vitejs/plugin-legacy';  
// https://vitejs.dev/config/
export default defineConfig({
  base: "./",  // 1.需要加上此处
  plugins: [
    vue(),
    legacy({  // 2.需要加上此处
      targets:["defaults","not IE 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
    })],
})

修改根目录下的 index.html

在index.html文件末尾添加

<script>
    (function (win) {
        let scripts = document.getElementsByTagName('script');
        for (let i = 0; i < scripts.length; i++) {
            let script = scripts[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>