解决vue3 vite 打包之后不能直接打开

起因:前端打包成zip供原生预加载,然后本地打开以提高用户体验

问题:vite打包之后,使用file协议会跨域,原生解决就行,但是Vite 默认使用原生的 ECMAScript 模块 (ESM) 进行开发和构建,这在现代浏览器中通常是非常高效和快速的。然而,一些旧版本的浏览器或不支持 ESM 的浏览器可能无法运行由 Vite 打包的代码。这时需要兼容

解决:使用@vitejs/plugin-legacy插件,在vite.config.js里添加以下代码

import Legacy from '@vitejs/plugin-legacy'
...
 plugins: [
    vue(),
    Legacy({
      targets: ['ie >= 11'],  // 或其他需要支持的浏览器
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
...

在这里插入图片描述并且需要安装yarn add terser因为从 Vite v3 开始,terser 成为了一个可选的依赖项

补充一点:兼容老版本后可能会出现

Uncaught (in promise) {"name": "TypeError", "message": "Cannot read properties of null (reading 'nextSibling')", "stack": "TypeError: Cannot read properties of null (reading 'nextSibling')\n at nextSibling
这个时候需要把元素用一个div包起来
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值