Vue + Laravel 5.4 + Mix — не удается получить /

Я начал загрузку с компонента Larvavel + Vue под названием vuetable-2 (очень неплохо кстати).

Во-первых, php artisan serve работает. Все в порядке, за исключением того, что он не выполняет горячее развертывание изменений в файлах .vue.

Я, наконец, получил npm run hot для работы, однако, когда я захожу на страницу, я получаю сообщение браузера:

Не удается получить/

Предпринятые действия:

  • Проверил свои зависимости, насколько я вижу, все правильно.
  • Удалил node_modules и пересобрал (уже три раза) npm install
  • Создан отдельный тестовый проект, чтобы убедиться, что Vue выполняет горячую перезагрузку (
    это происходит).

Я подозреваю, что проблема в какой-то конфигурации, но не могу понять, где именно.

Единственная странная вещь, которую я обнаружил, это то, что webpack.config.js говорит, что будет использовать port 3000, тем не менее, единственный порт, который, кажется, работает, это либо 8000 при использовании artisan, либо запустите dev hot использует 8080, что приводит к приведенному выше сообщению.

Однако, если я вношу изменения в файлы, я получаю приятный тост Laravel Mix, сообщающий, что сборка прошла успешно или нет, но не вижу их в браузере. webpack.config.js также имеет правильный путь сборки: public/.

Это мой файл 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=./webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./webpack.config.js",
    "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=./webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "laravel-elixir": "^4.0.4",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.2",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.4"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "jquery": "^3.1.1",
    "accounting": "^0.4.1",
    "vue-events": "^3.0.1",
    "vue-masked-input": "^0.4.1",
    "vue": "^2.1.10",
    "vuetable-2": "^1.3.1"
  }
}

Файл webpack.config.js не отличается от стандартного установленного.


vue.js laravel-mix laravel-5.4
person Anthony    schedule 15.04.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Для тех, кто все еще ищет ответы

Добавьте это в файл webpack.mix.js

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

mix.webpackConfig({
    devServer: {
        proxy: {
            '*': 'http://localhost:8000'
        }
    }
});

Запустите внутренний сервер (php artisan serve), а затем npm run hot. Это перенаправит все запросы внешнего интерфейса на серверную часть, чтобы файлы могли обрабатываться правильно. Подробнее здесь

При этом npm run hot должен работать без изменений разработчика.

источник https://github.com/JeffreyWay/laravel-mix/issues/2057

person Aslam    schedule 06.05.2020
comment
Я пробовал это, но это дает мне 404 | Не найденная страница Laravel. Сначала я поместил этот код в файл webpack.mix.js, затем запустил php artisan serve, а затем запустил npm run hot, но не повезло!! Не могли бы вы мне помочь? - person Hiren Gohel; 09.09.2020

arrow_upward
0
arrow_downward

Кажется, вам не хватает пути к cross-env... Попробуйте так:

"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js 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": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

Я удалил ваши "dev": "npm run development", и "prod": "npm run production",. Если вы хотите изменить команды, просто измените их.

Надеюсь, что это работает.

person Angus Simons    schedule 15.04.2017
comment
Привет @Angus Simons, спасибо за ответ. Я все еще изучаю все эти вещи, так что спасибо за указатели. К сожалению, я все еще получаю тот же результат. Но вы дали мне новый путь для расследования. - person Anthony; 15.04.2017
comment
Спасибо буду перечитывать. Я добавил кучу вещей через NPM, так что я думаю, что где-то я что-то напортачил. - person Anthony; 15.04.2017
comment
@Anthony Вы установили веб-пакет глобально? - person Angus Simons; 15.04.2017
comment
Нет, нет. Должен ли я это сделать? Я все еще немного не понимаю последствий глобальных модулей npm по сравнению с проектными. - person Anthony; 15.04.2017
comment
я думаю, что что-то происходит с Laravel (я использую 5.4 в Linux). Просто для проверки я сделал совершенно новую установку с laravel new Project. Затем npm install, а затем npm run dev, который выполнил сборку, но не смог запустить веб-службу. Затем попробовал npm run hot, который показывает, что служба сборки и веб-сервер работают, но снова то же самое сообщение: Не удается получить/ - person Anthony; 15.04.2017
comment
Также при новой установке вы должны установить папку /dist для cross-env, потому что они изменили ее. - person Angus Simons; 15.04.2017
comment
Спасибо @Angus, простите за глупый вопрос, как/где мне это сделать? - person Anthony; 15.04.2017
comment
@Anthony в вашем package.json в главной папке вашего проекта laravel и глобально установите npm и webpack - person Angus Simons; 15.04.2017
comment
Привет @Angus, уже обновил package.json в соответствии с вашими первоначальными комментариями. Также уже установлен webpack и npm глобально. Все та же проблема. :-| Вместо того, чтобы продолжать беспокоить вас, есть ли ссылка, на которую вы можете меня направить? Я искал, но не нашел того, который подходит для моего случая. - person Anthony; 15.04.2017
comment
Давайте продолжим обсуждение в чате. - person Angus Simons; 15.04.2017
comment
мне это не мешает - person Evgeniy Miroshnichenko; 04.06.2017
comment
@EvgeniyMiroshnichenko мы не решили вопрос в чате. У меня все еще та же проблема. - person Anthony; 21.06.2017
comment
После краткого исследования я думаю, что webpack-dev-server не будет работать из коробки с laravel, отчасти потому, что index.php находится в /public, а не /. Я нашел это сообщение, которое может помочь, хотя я не пробовал. - person Witt; 05.07.2017