Блог

Я следовал официальной документации для установки vuetify, но у меня возникли проблемы с этим.

Когда я пытаюсь добавить vuetify в свой проект, я всегда получаю два типа ошибок:

Первый тип:

 ERROR in ./src/main/resources/static/js/pages/App.vue?vueamp;type=styleamp;index=0amp;lang=cssamp; (./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?vueamp;type=styleamp;index=0amp;lang=cssamp;)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
   ╷
44 │ .app-main{
   │          ^
   ╵
  srcmainresourcesstaticjspagesApp.vue 44:10  root stylesheet
 @ ./src/main/resources/static/js/pages/App.vue?vueamp;type=styleamp;index=0amp;lang=cssamp; (./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?vueamp;typ
e=styleamp;index=0amp;lang=cssamp;) 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?vueamp;type=styleamp;index=0amp;lang=cssamp;
 @ ./src/main/resources/static/js/pages/App.vue?vueamp;type=styleamp;index=0amp;lang=cssamp;
 @ ./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:UserspingmIdeaProjectskursovayasrcmainresourcesstaticjs'
 @ ./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:UserspingmIdeaProjectskursovayasrcmainresourcesstaticjs'
 @ ./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, 'src', 'main', 'resources', 'static', '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'),
        ],
    }
  

2. Main.js

 import vuetify from 'plugins'