Bagaimana untuk menyelesaikan ralat semasa membuat projek uniapp dalam vuecli

Baru-baru ini, apabila menggunakan vuecli untuk mencipta projek uniapp, saya menghadapi masalah ralat, iaitu:

"Tidak dapat mencari modul "@dcloudio/webpack-uni-mp-loader""

Selepas beberapa penyiasatan, akhirnya saya menemui penyelesaian, dan kini saya berkongsi dengan anda.

1. Pasang pemalam uniapl

Mencipta projek uniapl dalam vuecli memerlukan pemalam uniapl, jadi ia perlu dipasang dahulu .

Pasang menggunakan npm:

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

Pasang menggunakan benang:

yarn global add @vue/cli-plugin-uni

2. Pengamatan projek

Selepas mencipta vuecli project , perlu dimulakan menggunakan arahan berikut dalam direktori akar projek:

vue invoke uni

Semasa proses pemasangan, anda perlu memilih uni-app.

3. Memasang kebergantungan

Selepas memasang pemalam uni-apl, anda perlu memasang kebergantungan lain, termasuk @vue/cli-plugin-uni dan webpack-cli .

Gunakan npm untuk memasang:

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

Gunakan benang untuk memasang:

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

4. Ubah suai konfigurasi

dalam direktori akar projek Seterusnya, cari fail vue.config.js dan tambah kod berikut:

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. Pasang pemuat

Dalam direktori akar projek, laksanakan arahan berikut untuk memasang pemuat:

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

Jalankan perintah npm run dev sekali lagi pada masa ini, dan anda boleh menjalankan projek uni-app seperti biasa.

Ringkasan

Melalui langkah di atas, kami boleh menyelesaikan masalah ralat dengan cepat semasa mencipta projek uniapp dalam vuecli, dan juga menerangkan langkah dan prinsip menyelesaikan masalah. Semoga ia membantu semua orang.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan ralat semasa membuat projek uniapp dalam vuecli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!