Laravel по-русски

Русское сообщество разработки на PHP-фреймворке Laravel.

Ты не вошёл. Вход тут.

#1 10.04.2018 10:08:57

Не работает Vue, только через artisan serve

Собственно вся суть проблемы описана в названии темы.
Система windows 10, OS panel (бывший open server)
Создал проект, инициализировал npm

файл app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('company', require('./components/Company.vue'));

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

файл 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/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=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.17",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

файл Company.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Компонент company</div>

                    <div class="card-body">
                        <div class="input-group">
                        <input type="text" class="form-control"><span class="input-group-btn">
                            <button class="btn btn-success">Кнопка</button>
                        </span></div>
                        <div class="company-list">
                            <ul class="list-unstyled">
                                <li>
                                    <div class="chekbox"><label><input type="checkbox"> Company 1</label></div>
                                </li>
                                <li>
                                    <div class="chekbox"><label><input type="checkbox"> Company 2</label></div>
                                </li>
                                <li>
                                    <div class="chekbox"><label><input type="checkbox"> Company 3</label></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Стоковый файл welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel vue</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div class="container" id="app">
            <company></company>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Открываю проект в браузере посредством псевдодомена от OSpanel, и открывается пустая страница, стили подгружены, app.js загружен (все минифицировано, и ни одного совпадения со словом "company".
Открываю сайт через php artisan serve и вуаля, все работает, файл app.js загружен в читаемом виде.
С чем это связанно? Как это работает то?

Не в сети

#2 22.04.2018 12:14:52

Re: Не работает Vue, только через artisan serve

1. "php artisan serve" - это локально, а через псевдомомен - это тоже локально?
2. Можно упростить пример: в app.js дописать:
alert('всё работает');
Пересобрать js (npm run dev) и проверить.

Не в сети

Подвал раздела