vite+vue3 打包后如何直接打开index.html文件

Administrator
发布于 2022-12-26 / 294 阅读 / 0 评论 / 0 点赞

vite+vue3 打包后如何直接打开index.html文件

vite + vue3 打包的文件,如果使用类似于nginx或者其他的服务器打开,可以正常打开,但如果直接点击打开index.html文件,页面会白屏,打开调试工具后发现如下跨域的报错。

image-1672069443822

这是因为打包后并不支持file引用协议。这就给混合式开发等时候带来困扰,因为在这种场景下,是有需要直接打开index.html文件的需求的。
在经历一段时间的困扰后,还是找到了解决方案。

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

npm i  @vitejs/plugin-legacy

在vite.config.ts 中进行配置

// 引入@vitejs/plugin-legacy
import legacy from '@vitejs/plugin-legacy';
// 在plugins中添加
legacy({
  targets: ['defaults', 'not IE 11']
}),

image-1672069486675

2.手动修改打包完的index.html文件(不建议使用,可直接略过使用第三步)

先执行 npm run build 命令进行打包,打包完成后打开 dist/index.html。
将index.html中所有的 标签中的 type=“module”、crossorigin、nomodule 删除。

举例
修改前
……
<script type="module" crossorigin src="./assets/index.5617d2f4.js"></script>
<script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy.7fa4d18d.js"></script>
……
修改后
 <script src="./assets/index.5617d2f4.js"></script>
<script id="vite-legacy-polyfill" src="./assets/polyfills-legacy.7fa4d18d.js"></script>

3.自动修改打包完的index.html文件(建议使用)

作为程序员,实现的就是将需要手动的变成自动的,如果每次打完包之后都要像第二步那样手动更改,那太麻烦了,太不符合程序员的风格了。
自动化的话,最简单的方式就是将原本符合条件的引用中需要保留的(src地址、标签内部的js),重新创建一个引用标签,重新引用。这样做,虽然页面打开的时候还会报错,页面会自动处理相关的错误的标签引用,在处理完毕后,页面会正常显现。
在项目的根目录下的index.html文件中的尾部添加新的来处理,一定要添加在尾部。

<script>
  (function (win) {
    // 获取页面所有的 <script > 标签对象
    let scripts = document.getElementsByTagName('script')
    // 遍历标签
    for(let i = 0; i < scripts.length; i++) {
      // 提取单个<script > 标签对象
      let script = scripts[i]
      // 获取标签中的 src
      let url = script.getAttribute("src")
      // 获取标签中的 type
      let type = script.getAttribute("type")
      // 获取标签中的js代码
      let scriptText = script.innerHTML
      // 如果有引用地址或者 type 属性 为 "module" 则代表该标签需要更改
      if (url || type === "module") {
        // 创建一个新的标签对象
        let tag=document.createElement('script');
        // 设置src的引入
        tag.setAttribute('url',url);
        // 设置js代码
        tag.innerHTML = scriptText
        // 删除原先的标签
        script.remove()
        // 将标签添加到代码中
        document.getElementsByTagName('head')[0].appendChild(tag)
      }
    }
  })(window)
</script>

如上,就可以正常双击打开打包完的index.html运行项目了。


评论