Ionic 7中Vanilla JS项目执行ionic cap add android报错问题

针对TypeScript转JavaScript后无法生成Android文件夹的问题，可通过以下步骤排查修复：

• 修正Capacitor配置文件格式
  将原capacitor.config.ts转换为capacitor.config.js时，需适配CommonJS语法，避免TypeScript残留：

  const { defineConfig } = require('@capacitor/cli');
  
  module.exports = defineConfig({
    appId: 'com.your.app',
    appName: 'YourApp',
    webDir: 'dist',
    bundledWebRuntime: false
  });
  

• 确认Vite构建配置匹配
  检查vite.config.js的构建输出目录与Capacitor配置一致：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  import ionic from '@ionic/vite-plugin';
  
  export default defineConfig({
    plugins: [vue(), ionic()],
    build: {
      outDir: 'dist' // 需与capacitor.config.js中的webDir字段保持一致
    }
  });
  

  执行npm run build确认dist目录正常生成前端产物。

• 改用Capacitor原生命令初始化
  跳过ionic cap add的封装逻辑，直接执行原生流程：

  1. 执行npx cap init，按提示输入appId和appName
  2. 执行npm run build生成前端资源
  3. 执行npx cap add android

• 检查依赖完整性
  确保Capacitor Android依赖已安装：

  npm install @capacitor/android
  

  同时确认package.json中的build命令为"build": "vite build"。

• 清理缓存后重试

  1. 删除node_modules、package-lock.json和dist目录
  2. 执行npm install重新安装依赖
  3. 执行npx vite clean清理Vite缓存
  4. 重新执行npm run build和npx cap add android

内容的提问来源于stack exchange，提问作者srkigres