求助：Ionic项目config.xml加载失败及Cordova集成等系列问题

问题梳理 #

在VS Code中运行Ionic Cordova命令时遇到三个连续错误：

1. 执行命令时提示*「Cannot load empty config.xml file」*，多次运行ionic integrations enable cordova --add无效
2. 删除重装Android平台（cordova add platform android）时提示*「Cannot load Cordova config.INVALID_PACKAGE_JSON」*
3. 用npm init修复JSON后，执行ionic cordova build提示*「Cannot run sass task: missing in gulpfile.js」*

附当前package.json内容：

{
    "name": "test",
    "version": "0.0.1",
    "author": "test",
    "homepage": "http://test.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "ng-swagger-gen": "ng-swagger-gen -c swagger-gen/ng-swagger-gen.conf.json"
    },
"devDependencies": {
        "@ionic/app-scripts": "3.2.3",
        "com-sarriaroman-photoviewer": "file:plugin-src/com-sarriaroman-photoviewer",
        "cordova-android": "^11.0.0",
        "cordova-ios": "^6.2.0",
        "cordova-plugin-badge": "file:plugin-src/cordova-plugin-badge",
        "cordova-plugin-camera": "^6.0.0",
        "cordova-plugin-file": "^7.0.0",
        "cordova-plugin-file-transfer": "git+https://github.com/apache/cordova-plugin-file-transfer.git",
        "cordova-plugin-ionic-webview": "^5.0.0",
        "cordova-plugin-local-notification": "file:plugin-src/cordova-plugin-local-notification",
        "cordova-plugin-media": "file:plugin-src/cordova-plugin-media",
        "cordova-plugin-safariviewcontroller": "^2.0.0",
        "cordova-sqlite-storage": "^6.0.0",
        "cordova.plugins.diagnostic": "^6.0.4",
        "ng-swagger-gen": "0.11.4",
        "typescript": "2.6.2"
    },

}

1. 修复*「Cannot load empty config.xml file」*错误 #

• 检查项目根目录是否存在config.xml文件：
  • 若不存在，手动创建基础模板（替换为你的项目信息）：

    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.test.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
        <name>test</name>
        <description>Test App</description>
        <author email="dev@test.com" href="http://test.com/">test</author>
        <content src="index.html" />
        <access origin="*" />
        <allow-intent href="http://*/*" />
        <allow-intent href="https://*/*" />
        <allow-intent href="tel:*" />
        <allow-intent href="sms:*" />
        <allow-intent href="mailto:*" />
        <allow-intent href="geo:*" />
        <platform name="android">
            <allow-intent href="market:*" />
        </platform>
        <platform name="ios">
            <allow-intent href="itms:*" />
            <allow-intent href="itms-apps:*" />
        </platform>
    </widget>
    

  • 若存在但内容为空，备份后用上述模板覆盖
• 执行cordova prepare命令让Cordova重新关联配置文件，再尝试原命令

2. 修复*「Cannot load Cordova config.INVALID_PACKAGE_JSON」*错误 #

你的package.json存在JSON语法错误：devDependencies块末尾多了一个逗号

• 打开package.json，删除devDependencies闭合后的逗号，修正后文件示例：

  {
      "name": "test",
      "version": "0.0.1",
      "author": "test",
      "homepage": "http://test.com/",
      "private": true,
      "scripts": {
          "clean": "ionic-app-scripts clean",
          "build": "ionic-app-scripts build",
          "lint": "ionic-app-scripts lint",
          "ionic:build": "ionic-app-scripts build",
          "ionic:serve": "ionic-app-scripts serve",
          "ng-swagger-gen": "ng-swagger-gen -c swagger-gen/ng-swagger-gen.conf.json"
      },
  "devDependencies": {
          "@ionic/app-scripts": "3.2.3",
          "com-sarriaroman-photoviewer": "file:plugin-src/com-sarriaroman-photoviewer",
          "cordova-android": "^11.0.0",
          "cordova-ios": "^6.2.0",
          "cordova-plugin-badge": "file:plugin-src/cordova-plugin-badge",
          "cordova-plugin-camera": "^6.0.0",
          "cordova-plugin-file": "^7.0.0",
          "cordova-plugin-file-transfer": "git+https://github.com/apache/cordova-plugin-file-transfer.git",
          "cordova-plugin-ionic-webview": "^5.0.0",
          "cordova-plugin-local-notification": "file:plugin-src/cordova-plugin-local-notification",
          "cordova-plugin-media": "file:plugin-src/cordova-plugin-media",
          "cordova-plugin-safariviewcontroller": "^2.0.0",
          "cordova-sqlite-storage": "^6.0.0",
          "cordova.plugins.diagnostic": "^6.0.4",
          "ng-swagger-gen": "0.11.4",
          "typescript": "2.6.2"
      }
  }
  

• 执行npm install确保依赖正常加载，再重新运行cordova add platform android

3. 修复*「Cannot run sass task: missing in gulpfile.js」*错误 #

@ionic/app-scripts 3.x版本依赖gulp处理Sass，你的项目缺少相关配置和依赖：

• 安装必要的gulp依赖：

  npm install gulp gulp-sass gulp-clean-css gulp-rename --save-dev
  

• 在项目根目录创建gulpfile.js，添加Sass处理任务：

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  var cleanCss = require('gulp-clean-css');
  var rename = require('gulp-rename');
  
  var paths = {
    sass: ['./src/**/*.scss']
  };
  
  gulp.task('sass', function(done) {
    gulp.src('./src/theme/variables.scss')
      .pipe(sass())
      .on('error', sass.logError)
      .pipe(gulp.dest('./www/css/'))
      .pipe(cleanCss({ keepSpecialComments: 0 }))
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest('./www/css/'))
      .on('end', done);
  });
  
  gulp.task('watch', function() {
    gulp.watch(paths.sass, ['sass']);
  });
  
  gulp.task('default', ['sass']);
  

• 调整package.json中的build脚本，确保调用gulp任务：
  修改scripts里的build字段为：

  "build": "gulp sass && ionic-app-scripts build"
  

• 最后执行ionic cordova build测试

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