“Vue3+Vite打包后，白屏沉默，重启重试无果，我该如何解决？”

每次最后打包总是会或多或少出现一些问题，昨天打包项目完之后

• 直接点击dist中的index.html去看看有没有什么发题，一打开奇怪的事发生了，居然是空白；
• 但是在vscode中右键Open with Live Server一看项目没啥问题，但是部署到线上没人给右键，于是乎。

以下仅记录本人的过程，做参考

• 错误截图
  

• npm i @vitejs/plugin-legacy -D

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

• 在打完包的dist—>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>

• 保存之后，然后单击index.html就可以访问了。
• 然后就是放在服务器，配置nginx然后切记重启nginx，不然在本地浏览器访问不到。

2023.6.22 17:00