Lors de la création d'une mini-application Bytedance avec mpvue, une erreur courante survient si la configuration du projet est incorrecte. Cet article explique comment identifier et corriger ce problème.

Initialisation et génération du projet

Commencez par initialiser un projet mpvue en utilisant le modèle rapide :

vue init mpvue/mpvue-quickstart mon-projet
cd mon-projet
npm install

Ensuite, générez la structure pour la plateforme Bytedance :

npm run dev:tt

Cela crée le répertoire dist/tt/ contenant les fichiers de la mini-application.

Problème lors de l'importation dans l'IDE Bytedance

En ouvrant le dossier généré avec l'IDE Bytednace, une erreur de compilation apparaît. Le message d'erreur indique que le type de projet ne peut être déterminé, car les fichiers app.json ou game.json sont introuvables.

Analyse du code source de l'outil de construction

En examinant le fichier binaire de l'IDE (index.js), la fonction BuildDist lance une exception si la variable buildType n'est pas valide. Cette variable est définie par getProjectType, qui lit project.config.json.

// Extrait simplifié de la logique de détection
function determinerTypeProjet() {
    const config = lireJSON('./project.config.json');
    const cheminRacine = config.miniprogramRoot || '';
    const cheminAbsolu = path.join(process.cwd(), cheminRacine);

    if (fs.existsSync(path.join(cheminAbsolu, 'app.json'))) {
        return 'application';
    } else if (fs.existsSync(path.join(cheminAbsolu, 'game.json'))) {
        return 'jeu';
    }
    return 'inconnu';
}

Cause racine de l'erreur

Le fichier project.config.json dans le répertoire racine contient souvent une configuration incorrecte pour miniprogramRoot. Par exemple :

{
    "miniprogramRoot": "dist/wx/"
}

Cela indique à l'outil de recherche des fichiers app.json dans un sous-répertoire erroné, alors que le projet Bytedance se trouve dans dist/tt/.

Corection de la configuration

Pour résoudre le problème, modifiez project.config.json dans le répertoire racine du projet mpvue. Changez miniprogramRoot pour pointer vers le dossier de sortie actuel :

{
    "miniprogramRoot": "./"
}

Alternativement, supprimez complètement la ligne miniprogramRoot du fichier. Sauvegardez et relancez la compilation. L'IDE Bytedance devrait maintenant détecter correctement le projet et afficher l'interface.

Vérification finale

Après correction, le projet se compile sans erreur. Vous pouvez tester la mini-application directement dans l'IDE ou la prévisualiser sur un appareil mobile via les outils de développement Bytedance.