Comment résoudre l'erreur lors de la création d'un projet Uniapp dans Vuecli

Récemment, lors de l'utilisation de vuecli pour créer le projet uniapp, j'ai rencontré un problème d'erreur, à savoir :

"Impossible de trouver le module "@dcloudio/webpack-uni-mp-loader""

Après quelques investigations, j'ai finalement trouvé une solution , partagez-le avec tout le monde maintenant.

1. Installer le plug-in uni-app

La création d'un projet uni-app dans vuecli nécessite le plug-in uni-app, il doit donc être installé en premier.

Installer à l'aide de npm :

npm install -g @vue/cli-plugin-uni

Installer à l'aide de fil :

yarn global add @vue/cli-plugin-uni

2. Initialisation du projet

Après avoir créé le projet vuecli, vous devez utiliser la commande suivante dans le répertoire racine du projet pour l'initialiser :

vue invoke uni

Pendant l'installation processus, vous devez sélectionner uni-app.

3. Installer les dépendances

Après avoir installé le plug-in uni-app, vous devez installer d'autres dépendances, notamment @vue/cli-plugin-uni et webpack-cli.

Installer avec npm:

npm install @vue/cli-plugin-uni webpack-cli --save

Installer avec Yarn:

yarn add @vue/cli-plugin-uni webpack-cli

4. Modifier la configuration

Dans le répertoire racine du projet, recherchez le fichier vue.config.js et ajoutez le code suivant :

chainWebpack: config => {
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
},

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/styles/vars.styl'),
        path.resolve(__dirname, './src/assets/styles/mixins.styl')
      ]
    })
}

5. Install Loader

Dans le répertoire racine du projet, exécutez la commande suivante pour installer le chargeur :

npm install style-resources-loader --save-dev

Exécutez à nouveau la commande npm run dev à ce moment-là, et vous pourrez exécuter le projet uni-app normalement.

Résumé

Grâce aux étapes ci-dessus, nous pouvons résoudre rapidement le problème du rapport d'erreurs lors de la création d'un projet uniapp dans vuecli, et également expliquer les étapes et les principes de résolution du problème. J'espère que cela aide tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!