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')
相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel1 小时前
Web发展与Vue.js导读
前端
YAY_tyy1 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801464 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿7 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
Q_Q5110082857 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php