Laravel Mix и VUE, VUE не найдены

Итак, я получаю эту ошибку NPM, и я не могу понять, почему не может быть разрешена только VUE. Я использую Laravel 5.6. Это новая установка Laravel с небольшой конфигурацией веб-пакетов. Я разрешил путь в webpackConfig к VUE, и я считаю, что он не работает на этапе извлечения в webpack.mix.js

Vue установлен в node_modules / vue

ошибка генерируется с использованием npm run dev и npm run prod

Package.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": {
"@vue/test-utils": "^1.0.0-beta.10",
"axios": "^0.18",
"babel-jest": "^22.1.0",
"bootstrap": "^4.1.3",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"pace": "github:HubSpot/pace#v1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.4",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.0.7",
"vue": "^2.5.17"
  },
  "dependencies": {
    "imagemin": "^6.0.0"
  }
}

webpack.mix.js

let 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.setPublicPath('public');

/*
|--------------------------------------------------------------------------
| Webpack Config
|--------------------------------------------------------------------------
*/
mix.webpackConfig({
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules/bootstrap/dist'),
      path.resolve(__dirname, 'node_modules/jquery/dist'),
      path.resolve(__dirname, 'node_modules/vue'),
      path.resolve(__dirname, 'node_modules/axios/dist'),
      path.resolve(__dirname, 'node_modules/lodash'),
      path.resolve(__dirname, 'node_modules/sweetalert2/dist'),
      path.resolve(__dirname, 'node_modules/popper.js/dist')
    ]
  }
});

/*
|--------------------------------------------------------------------------
| Vendor Extraction
|--------------------------------------------------------------------------
*/
mix.extract([
  'vue',
  'jquery',
  'axios',
  'sweetalert2',
  'lodash',
  'js/bootstrap',
  'popper.js'
]);

/*
|--------------------------------------------------------------------------
| Autoload Dependancies
|--------------------------------------------------------------------------
*/
mix.autoload({
  jquery: ['$', 'window.jQuery', 'jQuery']
});

/*
|--------------------------------------------------------------------------
| Mix App Resources
|--------------------------------------------------------------------------
| app.js | Application Javascript file
| app.scss | Applciation SCSS file
*/
mix
.js(['resources/js/app.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css');

/*
|--------------------------------------------------------------------------
| Mix In Production
|--------------------------------------------------------------------------
*/
if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
mix.version();
}

Ошибка NPM

ERROR in multi vue jquery axios sweetalert2 lodash js/bootstrap popper.js
Module not found: Error: Can't resolve 'vue' in '/Path/To/Project/Project-Folder'
 @ multi vue jquery axios sweetalert2 lodash js/bootstrap popper.js

app.js

 /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

Вы установили vue? Какую команду вы выполнили, чтобы сгенерировать эту ошибку?

Devon 08.09.2018 19:23

Vue установлен, я использовал npm run dev, npm run prod тоже выдает ошибку.

Tyler Radlick 08.09.2018 19:28

Вы пробовали path.resolve(__dirname, 'node_modules/vue/dist'),?

Devon 08.09.2018 19:51

@Devon Я только что сделал, у меня все еще та же ошибка.

Tyler Radlick 08.09.2018 20:03

в resources/assets/js/app.js у вас, вероятно, есть эта строка require('bootstrap') или import bootstap from './bootstrap', прокомментируйте ее и повторите попытку

Boussadjra Brahim 08.09.2018 21:02

@boussadjrabrahim У меня есть это. Даже если он закомментирован, я получаю ту же ошибку. Я добавил свой файл app.js

Tyler Radlick 08.09.2018 21:33

@BoussadjraBrahim Я пытался понять это в течение 2 дней. Удивительно: удаление строки require('./bootstrap'), работает, и теперь Vue Devtools может обнаруживать vue js. Кто-нибудь может догадаться, почему это так?

Shreyansh Panchal 16.11.2018 08:32
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
1
7
6 071
1

Ответы 1

В вашем файле webpack.mix есть следующая строка:
path.resolve(__dirname, 'node_modules/vue'),

Просто убедитесь, что это правильно, возможно, вам нужно настроить таргетинг на папку dist или что-то подобное, например

path.resolve(__dirname, 'node_modules/vue/dist'),

Другие вопросы по теме