vuecli で uniapp プロジェクトを作成するときのエラーを解決する方法

最近、vuecli を使用して uniapp プロジェクトを作成したときに、エラーの問題が発生しました。

「モジュール "@dcloudio/webpack-uni-mp-loader" が見つかりません」

いくつかの調査の結果、最終的に解決策を見つけたので、それを共有します。

1. uni-app プラグインのインストール

vuecli で uni-app プロジェクトを作成するには uni-app プラグインが必要なので、最初にインストールする必要があります。

npm を使用してインストールする:

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

yarn を使用してインストールする:

yarn global add @vue/cli-plugin-uni

2. プロジェクトの初期化

vuecli プロジェクトを作成した後、次のことが必要です。ルート ディレクトリで次のコマンドを使用して初期化します。

vue invoke uni

インストール プロセス中に、uni-app を選択する必要があります。

3. 依存関係のインストール

uni-app プラグインをインストールした後、@vue/cli-plugin-uni や webpack-cli などの他の依存関係をインストールする必要があります。 。

npm を使用してインストールする:

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

yarn を使用してインストールする:

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

4. 構成を変更する

プロジェクトのルート ディレクトリで、vue を見つけます。 .config.js ファイルに次のコードを追加します。

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. ローダーのインストール

プロジェクトのルート ディレクトリで、次のコマンドを実行してローダーをインストールします。

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

この時点で、npm run dev コマンドを再度実行すると、uni-app プロジェクトを通常どおり実行できます。

概要

上記の手順により、vuecli で uniapp プロジェクトを作成する際のエラー報告の問題をすぐに解決でき、また、問題解決の手順と原則についても説明します。お役に立てれば幸いです。

以上がvuecli で uniapp プロジェクトを作成するときのエラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。