Добавление тега стиля в Vue Component Error - PullRequest
Новая
       1

Добавление тега стиля в Vue Component Error

1 голос
/ 20 сентября 2019

Я впервые изучаю vue и разрабатываю SPA (административную часть) с laravel 5.7 и vue router.

Я использую Laravel Mix для компиляции моих .vue файлов.

Если я добавлю тег <style> в мой файл компонента, он перенаправит меня на корневой URL и выдаст ошибку (замеченов инспекторе браузера)

Я переустановил все npm пакеты, но это не сработало

Мой пример файла компонента (blog.vue) 

<template>
   <div>
      <h2 class="title">Create Blog</h2>
   </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    .title {
      color: red;
    }
</style>

Ниже package.json в корневой директории laravel 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.3.1",
        "bootstrap-vue": "^2.0.0-rc.26",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.10",
        "vue-router": "^3.0.7",
        "vue-template-compiler": "^2.6.10",
        "vue2-transitions": "^0.3.0"
    },
    "dependencies": {
        "vue-sweetalert2": "^2.1.1"
    }
}

Я ожидал, что она отобразит страницу без проблем, но я получил следующий вывод в консоли браузера 

TypeError: "modules[moduleId] is undefined"
    __webpack_require__ http://laravelvue.local/js/app.js:64
    ./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ListCategories.vue?vue&type=style&index=0&lang=css& http://laravelvue.local/2.js:93
    __webpack_require__ http://laravelvue.local/js/app.js:64
    ./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ListCategories.vue?vue&type=style&index=0&lang=css& http://laravelvue.local/2.js:113
    __webpack_require__ http://laravelvue.local/js/app.js:64
    ./resources/js/components/ListCategories.vue?vue&type=style&index=0&lang=css& http://laravelvue.local/2.js:289
    __webpack_require__ http://laravelvue.local/js/app.js:64
    vue http://bestreviews.local/2.js:238
    __webpack_require__ http://laravelvue.local/js/app.js:64
app.js:54748:17

Примечание: http://laravelvue.local/ - это мой локальный URL-адрес для разработки на моем компьютере с Windows 10, PHP 7.1, MySQL 5.6

РЕДАКТИРОВАТЬ: добавление содержимого файла app.js Laravel в соответствии с запросом@ Kyuriko 

require('./bootstrap');

import Vue from 'vue';
import App from './components/App';

import BootstrapVue from 'bootstrap-vue';

import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(BootstrapVue);
Vue.use(VueSweetalert2);

import router from './router'

const app = new Vue({
    el: '#app',
    router,
    components: {App}
});

Содержимое webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/admin/css/style.css');

Также содержимое bootstrap.js

window._ = require('lodash');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Примечание: комментарии удалены

...