无法将Vuetify连接到项目

编程问答 2022-12-06

问题描述

我按照官方文档安装了vuetify，但是我遇到了麻烦。

当我尝试在项目中添加vuetify时，总是会遇到两种错误：

第一种类型：

ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!.
/node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&)
Module build Failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
   ╷
44 │ .app-main{
   │          ^
   ╵
  src\main\resources\static\js\pages\App.vue 44:10  root stylesheet
 @ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loade
r/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&typ
e=style&index=0&lang=css&) 2:26-348
 @ ./node_modules/vue-style-loader!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules
/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
 @ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
 @ ./src/main/resources/static/js/pages/App.vue
 @ ./src/main/resources/static/js/main.js

ERROR in ./src/main/resources/static/js/main.js
Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js'
 @ ./src/main/resources/static/js/main.js 5:0-39 14:11-18

P.S .app-main是我的样式类。没有vuetify，它就可以正常工作。

第二种类型：

Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js'
 @ ./src/main/resources/static/js/main.js 5:0-39 13:11-18
i ｢wdm｣: Failed to compile.
Error from chokidar (/): Error: EBUSY: resource busy or locked,lstat 'C:\DumpStack.log.tmp'
Error from chokidar (/): Error: EBUSY: resource busy or locked,lstat 'C:\hiberfil.sys'
Error from chokidar (/): Error: EBUSY: resource busy or locked,lstat 'C:\pagefile.sys'
Error from chokidar (/): Error: EBUSY: resource busy or locked,lstat 'C:\swapfile.sys'

我不确定更改错误的影响是什么，但是当我更改 main.js 文件中的代码时，错误正在更改。

package.json 

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import {connect} from "./util/ws";
import vuetify from '/plugins/vuetify' // path to vuetify export

if (frontendData.profile) {
    connect()
}

Vue.use(VueResource)

new Vue({
    el: '#app',vuetify,render: a => a(App)
}).$mount('#app')

我的Webpack.config.js 

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',devtool: 'source-map',entry: path.join(__dirname,'src','main','resources','static','js','main.js'),devServer: {
        contentBase: './dist',compress: true,port: 8000,allowedHosts: [
            'localhost:8080'
        ],stats: 'errors-only',clientLogLevel: 'error'
    },module: {
        rules: [
            {
                test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {
                    loader: 'babel-loader',options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },{
                test: /\.vue$/,loader: 'vue-loader'
            },{
                test: /\.css$/,use: [
                    'vue-style-loader','style-loader','css-loader',{
                        // Requires sass-loader@^8.0.0
                        options: {
                            implementation: require('sass'),sassOptions: {
                                fiber: require('fibers'),indentedSyntax: true // optional
                            },},]
            }
        ]
    },plugins: [
        new VueLoaderPlugin()
    ],resolve: {
        modules: [
            path.join(__dirname,'js'),path.join(__dirname,'node_modules'),],}
}

解决方法

通过将此属性添加到Webpack来解决：

resolve: {
        alias: {
            plugins: path.resolve(__dirname,'src/plugins/vuetify.js')
        },extensions: ['.js','jsx','.css'],modules: [
            path.join(__dirname,'src','main','resources','static','js'),path.join(__dirname,'node_modules'),],}
  1. Main.js 
import vuetify from 'plugins'
javascriptvuetify.jswebpackwebpackwebpackyarnpkg