Question

对于Laravel（Symfony中的大多数项目）我还很陌生，而且我似乎无法编译我的资源。我以为我的package.json中包含了所有必需的东西。但是，我不确定是否丢失了一些东西。我正在关注Laravel 6前端文档，但似乎无法弄清楚该怎么办？我的Symfony Encore应用程序运行良好，只是想立即使其与Laravel一起使用。任何想法表示赞赏！

我的编译错误：

ERROR in ./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve '../fonts/Simple-Line-Icons.eot?v=2.4.0' in 'c:\wamp\www\GasCruiter\resources\js\userApp\js'
 @ ./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss&) 7:325-374 7:405-454
 @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss&
 @ ./resources/js/userApp/js/App.vue?vue&type=style&index=0&lang=scss&
 @ ./resources/js/userApp/js/App.vue
 @ ./resources/js/userApp/js/main.js
 @ multi ./resources/js/userApp/js/main.js

packages.json

{
"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": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.7.7",
    "@fortawesome/fontawesome-pro": "^5.12.0",
    "@vue/cli-plugin-babel": "^4.1.1",
    "babel-loader": "^8.0.6",
    "cross-env": "^6.0.3",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "node-sass": "^4.13.0",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.24.0",
    "sass-loader": "^8.0.0",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "^2.6.11"
},
"dependencies": {
    "@coreui/coreui": "^2.1.16",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
    "@coreui/icons": "1.0.0",
    "@coreui/vue": "^2.0.0-rc.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "axios": "^0.19",
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.1.0",
    "chart.js": "^2.9.3",
    "popper.js": "^1.16.0",
    "simple-line-icons": "^2.4.1",
    "style-loader": "^1.1.1",
    "sweetalert2": "^9.5.3",
    "v-calendar": "^0.9.7",
    "vee-validate": "^3.2.1",
    "vue": "^2.6.11",
    "vue-chartjs": "^3.5.0",
    "vue-google-places": "0.1.5",
    "vue-router": "^3.1.3",
    "vue-slider-component": "^3.1.0",
    "vue-snotify": "^3.2.1",
    "vue2-editor": "^2.10.2",
    "vuelidate": "^0.7.4",
    "vuex": "^3.1.2"
}

}

webpack.config.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/website/app.js', 'public/website/js')
    .sass('resources/sass/website/app.scss', 'public/website/css')

/**
 * User App CSS and JS
 */
    .js('resources/js/userApp/js/main.js', 'public/userApp/js')
    .sass('resources/js/userApp/css/style.scss', 'public/userApp/css');

我的App.vue

<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import '~@coreui/icons/css/free.min.css';
  @import '~simple-line-icons/scss/simple-line-icons.scss';
</style>

Laravel 6 Webpack问题编译VueJS应用

0 个答案: