vite配置兼容低版本浏览器
时间: 2023-08-11 20:08:38 浏览: 90
要使Vite兼容低版本浏览器,可以采取以下几种方式:
1. 配置babel
在项目根目录下创建`.babelrc`文件,并添加以下配置:
```
{
"presets": [
["@babel/preset-env", {
"targets": {
"ie": "11"
}
}]
]
}
```
这里的`targets`选项指定了需要兼容的浏览器版本,这里设置为IE11。
同时需要安装`@babel/preset-env`:
```
npm install @babel/preset-env --save-dev
```
2. 添加polyfill
在项目的`index.html`文件中添加以下代码:
```
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
```
这里使用了Polyfill.io提供的CDN服务,可以根据需要加载各种Polyfill。
3. 配置vite
在Vite的配置文件`vite.config.js`中添加以下配置:
```
import legacy from '@vitejs/plugin-legacy';
export default {
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
}
```
这里使用了`@vitejs/plugin-legacy`插件,可以在打包时自动处理兼容性问题。`targets`选项指定了需要兼容的浏览器版本,这里设置为除IE11以外的所有浏览器。
以上是三种常用的方式,您可以根据项目需要选择其中的一种或多种进行配置。