cordova app webpack升级为vite

本文是对vue2进行兼容

1.在项目根目录下运行以下命令,安装 Vite 和必要的插件:

复制代码
npm install vite @vitejs/plugin-legacy --save-dev

vite:Vite 核心包。

@vitejs/plugin-legacy:为旧版浏览器提供支持(建议添加 vite生成的script 会有type="module")。

否则在cordova中可能报错

复制代码
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTM

请注意plugin-legacy 版本 用最新的话 目前用vite6 vite5.x 请使用plugin-legacy5.x对应版本

2.在项目根目录下创建一个 vite.config.js 文件,配置 Vite 的构建选项:

复制代码
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import legacy from '@vitejs/plugin-legacy'
import inject from '@rollup/plugin-inject'
import content from '@originjs/vite-plugin-content'
import commonjs from '@rollup/plugin-commonjs'
import path from 'path'

export default defineConfig({
  root: 'src', // 指定源码目录
  base: './', // 设置基础路径
  build: {
    outDir: path.resolve(__dirname, 'app/www'), // 输出到 Cordova 的 www 目录
    emptyOutDir: true, // 构建前清空输出目录
    sourcemap: true, // 生成 sourcemap
    target: 'es2015',
    commonjsOptions: { include: [] } //记得添加否则vite 会在build之后默认为commonjs导致各种奇葩报错
  },
resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.less'],
    alias: {
      // 配置 Vue 2 别名
      '@': path.resolve(__dirname, 'src'),
      }
 },
  plugins: [
   commonjs(),
    vue(),
    vueJsx(),
    legacy({
      targets: ['defaults', 'not IE 11'], // 兼容目标,增加对旧版浏览器的支持
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 可选的额外 polyfill
    }),
     inject({
      '$': 'jquery',
      'jQuery': 'jquery',
      include: [/.*\.js$/, /.*\.vue$/]
    }),
    content()
  ],
  server: {
    port: 3000, // 开发服务器端口
    open: true, // 自动打开浏览器
  },
});

3.调整项目结构

确保你的项目结构符合 Vite 的要求:

将前端代码放在 src 目录下。

将静态资源(如图片、字体等)放在 src/assets 目录下。

将 index.html 放在 src 目录下。

4.更新 package.json 脚本

修改 package.json 中的 scripts 部分,使用 Vite 替代 Webpack:

复制代码
  "scripts": {
    "dev": "vite --host",
    "serve": "vite --host --force",
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
  },

以下是几个报错信息 都是有未添加 commonjsOptions: { include: [] }引起的

复制代码
Uncaught TypeError: Cannot read properties of undefined (reading 'extendFrom')
dex-BXZqtDZE.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'distance')
相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘8 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能