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')
相关推荐
quan263115 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路16 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
cdcdhj1 小时前
数据库存储大量的json文件怎么样高效的读取和分页,利用文件缓存办法不占用内存
缓存·node.js·json