当前位置：首页 > article >正文

cordova app webpack升级为vite

article 2025/3/4 22:07:34

本文是对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')

查看全文

http://www.kler.cn/a/570688.html