c***@chenbang-inc.com
c***@chenbang-inc.com
  • 发布:2024-01-03 15:09
  • 更新:2024-01-03 16:44
  • 阅读:828

【报Bug】vue3版本vite使用了@vitejs/plugin-legacy兼容老版本浏览器, 打包出来的index-xx.js 含有import()

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 14.2.1 (23C71)

浏览器平台: Chrome

浏览器版本: xx

项目创建方式: CLI

CLI版本号: "@dcloudio/uni-h5": "3.0.0-3080720230703001"

操作步骤:

vite.config.ts

import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
import DefineOptions from 'unplugin-vue-define-options/vite'  
import legacy from '@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'],  
})  

pages.json

{  
  "easycom": {  
    "autoscan": true,  
    "custom": {  
      // uni-ui 规则如下配置  
      "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": [  
    //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/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": "营业资质",  
            // "navigationStyle": "custom",  
            "app-plus": {  
              "titleNView": false  
            }  
          }  
        }  
      ]  
    },  
    {  
      "root": "subpackages/app",  
      "pages": [  
        {  
          "path": "village/index",  
          "style": {  
            "navigationBarTitleText": " ",  
            // "navigationStyle": "custom",  
            "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/plugin-legacy兼容老版本浏览器, 打包出来的index-xx.js 含有import()导致无法加载js文件。打开页面出现连接服务器超时。
配置见附件。

2024-01-03 15:09 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

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

  • c***@chenbang-inc.com (作者)

    回复 c***@chenbang-inc.com: 明白了,感谢。请问有啥办法可以支持转换dynamic import么

    2024-01-03 17:17

  • DCloud_UNI_OttoJi

    回复 c***@chenbang-inc.com: 你要解决哪个浏览器的兼容?

    2024-01-03 17:18

  • c***@chenbang-inc.com (作者)

    回复 DCloud_UNI_OttoJi: 原有的flutter开发的app。通过引入了一个叫做webf的差距。这个插件不支持import..


    webf文档:

    https://github.com/openwebf/webf

    2024-01-03 17:33

  • c***@chenbang-inc.com (作者)

    回复 DCloud_UNI_OttoJi: 目的是通过webf可以将html转换成navtive。因为用了uniapp开发了小程序和h5 。所以打算复用一套代码。

    2024-01-03 17:38

  • c***@chenbang-inc.com (作者)

    回复 DCloud_UNI_OttoJi: 好像并不是dynamic import的原因。我在瞅瞅。

    2024-01-03 17:51

  • DCloud_UNI_OttoJi

    回复 c***@chenbang-inc.com: webf 踩坑经验有总结么,看到过没用过

    2024-01-03 20:01

  • c***@chenbang-inc.com (作者)

    回复 DCloud_UNI_OttoJi: 目前看不太适合大项目使用。。简单的页面可以用用。主要是适配样式和加一些桥接。

    2024-01-18 14:31

要回复问题请先登录注册