vuetify-loader 1.6 与 laravel mix 不兼容，vue-loader 15 目前不支持 oneOf 的 vue 规则

问题描述

我正在尝试在 Laravel 上安装 vue.我相信我明白了，但是当我运行 npm run watch 或 npm run dev 时，它会生成此错误.我试了好几件事都解决不了

I'm trying to install the vue on the laravel. I believe I got it, but when I run the npm run watch or npm run dev, it generates this error. I've tried several things and I can't solve

Error: [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.
    at VueLoaderPlugin.apply (C:\laravel\construtora2\node_modules\vue-loader\lib\plugin-webpack4.js:46:13)
    at webpack (C:\laravel\construtora2\node_modules\webpack\lib\webpack.js:51:13)
    at processOptions (C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:272:16)
    at C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:364:3
    at Object.parse (C:\laravel\construtora2\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
    at C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\laravel\construtora2\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\laravel\construtora2\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Gabriel\AppData\Roaming\npm-cache\_logs\2020-08-04T21_40_34_083Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Gabriel\AppData\Roaming\npm-cache\_logs\2020-08-04T21_40_34_137Z-debug.log

文件:webpack.mix.js

File: webpack.mix.js

const mix = require('laravel-mix');

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
var webpackConfig = {
        plugins: [
            new VuetifyLoaderPlugin()
            // other plugins ...
        ]
    // other webpack config ...
}
mix.webpackConfig(webpackConfig);
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

请有人帮助我

推荐答案

对，所以你在使用 Vuetify 这是因为 vuetify-loader 1.6 在 laravel mix 设置上有一些问题.更具体地说，是因为 vue-loader 和 vuetify-loader 的顺序是由 laravel-mix 添加的.

Right so you are using Vuetify this is because vuetify-loader 1.6 has some problems with laravel mix setup. More specifically it's because the order of vue-loader and vuetify-loader was added by laravel-mix.

现在你需要在 laravel-mix 编译所有插件后添加 VuetifyLoaderPlugin.

For now you need to add VuetifyLoaderPlugin after laravel-mix compiles all the plugins.

因此从 var webpackConfig 变量中删除 new VuetifyLoaderPlugin().并在每个插件添加后添加 new VuetifyLoaderPlugin().

So remove the new VuetifyLoaderPlugin() from var webpackConfig variable. And add new VuetifyLoaderPlugin() after every plugin is added.

mix.extend('vuetify', new class {
    webpackConfig (config) {
        config.plugins.push(new VuetifyLoaderPlugin())
    }
})
mix.vuetify()

如果一切都让你不知所措，我有一个小的图书馆为你做一切.

If everything is overwhelming to you, I have a small library that does everything for you.

您需要做的就是安装它

npm i vuetifyjs-mix-extension -D

需要

require('vuetifyjs-mix-extension')

使用它

mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader')

这两种方法应该为您做同样的事情.您可以根据自己的喜好进行选择.

Those two approaches should do the same thing for you. You can choose on your preference.

这篇关于vuetify-loader 1.6 与 laravel mix 不兼容，vue-loader 15 目前不支持 oneOf 的 vue 规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！