Daniil Baev's questions

尝试通过webpack连接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

PS .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文件中的代码时它们会改变

包.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'),
        ],
    }
}

VUE + spring上的项目，我用什么方式都不能固定css，一开始就是不行，在尝试添加类样式时添加了style-loader有效，但是当尝试添加任何样式参数 ."style name" {color: bla bla}时，它会因以下错误而崩溃：

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/style-loader/dist/cjs.js!./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/vue-loader/lib/loaders/stylePostLoader.js):
CssSyntaxError: C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js\pages\App.vue:1:1: Unknown word
    at Input.error (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\input.js:130:16)
    at Parser.unknownWord (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:563:22)
    at Parser.other (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:168:12)
    at Parser.parse (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:77:16)
    at parse (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parse.js:17:12)
    at new LazyResult (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\lazy-result.js:60:16)
    at Processor.<anonymous> (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\processor.js:138:12)
    at Processor.process (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\processor.js:117:23)
    at doCompileStyle (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\@vue\component-compiler-utils\dist\compileStyle.js:46:35)
    at compileStyle (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\@vue\component-compiler-utils\dist\compileStyle.js:12:12)
    at Object.module.exports (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\vue-loader\lib\loaders\stylePostLoader.js:9:33)
 @ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& 1:0-321 1:337-340 1:342-660 1:342-660
 @ ./src/main/resources/static/js/pages/App.vue
 @ ./src/main/resources/static/js/main.js

应用程序.vue

<template>

    <div>
        <div v-if="!profile">Необходимо авторизоваться через <a href="/login">Google</a></div>
        <div v-else>
            <div>{{ profile.name }}&nbsp;<a href="/logout">Выйти</a></div>
            <messages-list :messages="messages"/>
        </div>
    </div>

</template>

<script>
import MessagesList from "components/messages/MessageList.vue";
import {addHandler} from "util/ws";
import {getIndex} from "util/collections";


export default {
    components: {
        MessagesList
    },
    data() {
        return {
            messages: frontendData.messages,
            profile: frontendData.profile
        }
    },
    created() {
        addHandler(data => {
            let index = getIndex(this.messages, data.id)
            if (index > -1){
                this.messages.splice(index, 1, data)
        } else {
                this.messages.push(data)
            }
        })
    }
}

</script>

<style>

</style>

主.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import {connect} from "./util/ws";

if (frontendData.profile) {
    connect()
}

Vue.use(VueResource)

new Vue({
    el: '#app',
    render: a => a(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',
                    'css-loader',
                    'style-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        modules: [
            path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
            path.join(__dirname, 'node_modules'),
        ],
    }
}

包.json

{
  "name": "kursovaya",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "@stomp/stompjs": "^5.4.4",
    "resolve-url": "^0.2.1",
    "sockjs-client": "^1.5.0",
    "vue": "^2.6.11",
    "vue-resource": "^1.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.1",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}