0

我正在使用 Laravel 5.6，我需要在 Vue 项目中实现 Vuetify。我还需要 vuetify-loader，否则我需要手动导入每个 Vuetify 组件。

我在webpack.mix.js文件中使用的代码如下：

mix
    .js('resources/assets/app.js', 'public/js/app.js')
    .sass('resources/assets/app.scss', 'public/css/app.css')
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin()
        ]
    })
    .version();

不幸的是，每次我尝试使用npm run dev它进行编译时，都会出现以下错误： UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined

4

1 回答 1

1

问题出在 vuetify-loader 源代码中，位于 loader.js 的第 21 行：

path: this.resourcePath.substring(this.rootContext.length + 1),

https://github.com/vuetifyjs/vuetify-loader/blob/v1.4.3/lib/loader.js

vuetify-loader 尝试读取this.rootContext. 我在网上快速搜索了一下，发现在 webpack 文档中，这rootContext是 Webpack 4 的一个属性。

所以我检查了我的 webpack 版本，发现 Laravel 5.6 默认没有使用 Webpack v4。

TL;博士;

你所要做的就是通过这样做将你的 webpack 版本升级到 Webpack 4：

npm remove laravel-mix
npm install laravel-mix@^4.0.0 --save-dev
于 2020-03-11T13:59:52.857 回答