uni-app vue3版本vite使用了@vitejs/plugin-legacy兼容老版本浏览器 打包出来的index-xx.js 含有import()
uni-app vue3版本vite使用了@vitejs/plugin-legacy兼容老版本浏览器 打包出来的index-xx.js 含有import()
操作步骤：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import DefineOptions from 'unplugin-vue-define-options/vite'
import legacy from '[@vitejs](/user/vitejs)/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
legacy({
targets: ['defaults', 'ie >= 11', 'chrome >= 52'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
}),
DefineOptions(),
],
transpileDependencies: ['@dcloudio/uni-ui'],
}) {
"easycom": {
"autoscan": true,
"custom": {
"ui-(.*)": "cb-mobile-ui/components/ui-$1/ui-$1.vue",
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
"cb-(.*)": "cb-biz-ui/components/cb-$1/cb-$1.vue"
}
},
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "本地生活",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/party/index",
"style": {
"navigationBarTitleText": "吃喝玩乐",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/points-center/index",
"style": {
"navigationBarTitleText": "积分中心",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/mall-rebate/index",
"style": {
"navigationBarTitleText": "商场返利",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": " ",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#f8f8f9"
},
"subPackages": [
{
"root": "subpackages/module",
"pages": [
{
"path": "certificate/index",
"style": {
"navigationBarTitleText": "营业资质",
"app-plus": {
"titleNView": false
}
}
}
]
},
{
"root": "subpackages/app",
"pages": [
{
"path": "village/index",
"style": {
"navigationBarTitleText": " ",
"app-plus": {
"titleNView": false
}
}
}
]
},
{
"root": "subpackages/business",
"pages": [
{
"path": "clock-in/index",
"style": {
"navigationBarTitleText": "打开",
"app-plus": {
"titleNView": false
}
}
}
]
}
],
"tabBar": {
"selectedColor": "#FF524F",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"color": "#0D111B",
"height": "75px",
"fontSize": "10px",
"iconWidth": "34px",
"spacing": "8px",
"list": [
{
"pagePath": "pages/home/index",
"text": "本地生活",
"iconPath": "/static/images/local-life.png",
"selectedIconPath": "/static/images/local-life_ac.png",
"imgWidth": 32,
"imgHeight": 34
},
{
"pagePath": "pages/party/index",
"text": "吃喝玩乐",
"iconPath": "/static/images/party.png",
"selectedIconPath": "/static/images/party_ac.png",
"imgWidth": 34,
"imgHeight": 34
},
{
"pagePath": "pages/points-center/index",
"text": "积分中心",
"iconPath": "/static/images/mall-rebate.png",
"selectedIconPath": "/static/images/mall-rebate_ac.png",
"isDot": true,
"num": 1,
"imgWidth": 46,
"imgHeight": 46
},
{
"pagePath": "pages/mall-rebate/index",
"text": "商城返利",
"iconPath": "/static/images/mall-rebate.png",
"selectedIconPath": "/static/images/mall-rebate_ac.png",
"imgWidth": 34,
"imgHeight": 34
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "/static/images/home-mine.png",
"selectedIconPath": "/static/images/home-mine_ac.png",
"imgWidth": 31,
"imgHeight": 39
}
]
}
}预期结果：
兼容import()语法。
实际结果：
产出的index-xx.js含有import()
bug描述：
vue3版本vite使用了[@vitejs](/user/vitejs)/plugin-legacy兼容老版本浏览器， 打包出来的index-xx.js 含有import()导致无法加载js文件。打开页面出现连接服务器超时。
图片
vue3 和 vite-legacy 对浏览器有最低限制。你使用 legacy 构建之后什么浏览器不认识 import？
legacy 文档说了，最起码兼容 dynamic import 的浏览器
import 最起码需要 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
chrome >=61
vue3 本身是不支持 ie 的，包括 ie11
回复 DCloud_UNI_OttoJi: 目的是通过webf可以将html转换成navtive。因为用了uniapp开发了小程序和h5 。所以打算复用一套代码。
在使用 [@vitejs](/user/vitejs)/plugin-legacy 插件时，Vite 会为老版本浏览器生成兼容的代码，其中包括使用 import() 动态导入语法。这是因为老版本浏览器（如 IE11）不支持原生的 ES 模块语法，因此需要通过 import() 来实现模块的动态加载。
为什么会有 import() 语法？
[@vitejs](/user/vitejs)/plugin-legacy 插件会将现代 JavaScript 代码转换为老版本浏览器能够理解的代码。为了实现模块的动态加载，插件会使用 import() 语法来加载模块。这是因为老版本浏览器不支持原生的 ES 模块语法（如 import 和 export），因此需要通过 import() 来实现模块的动态加载。
如何处理 import() 语法？
[@vitejs](/user/vitejs)/plugin-legacy 插件会自动处理 import() 语法，并生成兼容老版本浏览器的代码。你不需要手动处理这些代码，插件会自动为你生成兼容的代码。
如果你不想使用 import() 语法
如果你不希望生成 import() 语法，可以考虑以下几种方法：
-
不使用
[@vitejs](/user/vitejs)/plugin-legacy插件：如果你不需要兼容老版本浏览器，可以不使用[@vitejs](/user/vitejs)/plugin-legacy插件。这样生成的代码将只包含现代 JavaScript 语法。 -
配置
[@vitejs](/user/vitejs)/plugin-legacy插件：你可以通过配置[@vitejs](/user/vitejs)/plugin-legacy插件来控制生成的代码。例如，你可以通过polyfills选项来控制是否生成import()语法。import legacy from '[@vitejs](/user/vitejs)/plugin-legacy'; export default { plugins: [ legacy({ polyfills: false, // 禁用 polyfills }), ], };
