浏览器兼容

问题描述

使用 Vite 构建 Vue3 项目时，在 Chrome v76 中无法运行。

原因分析

查询 Vite 官方文档 后发现，发现了相关描述：

浏览器兼容性

用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器：

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

由此可见，上面的问题是由于浏览器兼容问题导致的。

解决方案

使用 @vitejs/plugin-legacy 解决老版浏览器兼容问题。

1. 安装依赖包

   npm i @vitejs/plugin-legacy -D
   npm i terser -D

2. 修改 vite.config.ts 文件

   import legacy from '@vitejs/plugin-legacy'
   
   export default {
     plugins: [
       legacy({
         targets: ['defaults', 'not IE 11'],
       }),
     ],
     build: {
      target: "es2015",
     },
   }