Отладка Vue В chrome не показывает оригинальный компонент vue - PullRequest
Новая
       26

Отладка Vue В chrome не показывает оригинальный компонент vue

0 голосов
/ 15 апреля 2020

Я новичок в Vue Js. Я разрабатываю проект в Laravel 7. * с Vue js. Мой Vue Структура проекта directory structure

приложение. js Файл содержит: 

require('./bootstrap');

window.Vue = require('vue');
Vue.config.debug = true;
Vue.config.devtools = true;
Vue.config.productionTip = false;
Vue.config.silent = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/home/HomeComponent.vue';
import CreateComponent from './components/post/CreateComponent.vue';
import IndexComponent from './components/post/IndexComponent.vue';
import EditComponent from './components/post/EditComponent.vue';
import Notification from './components/Notification.vue';

const routes = [
    {
        name: 'home',
        path: '/',
        component: HomeComponent
    },
    {
        name: 'create',
        path: '/create',
        component: CreateComponent
    },
    {
        name: 'posts',
        path: '/posts',
        component: IndexComponent
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditComponent
    },
    {
        name: 'notify',
        path: '/notifications',
        component: Notification
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Приложение. Vue Файл содержит: 

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 p-0">
                <nav class="navbar navbar-expand-sm bg-info navbar-dark">
                    <div class="container">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <router-link to="/" class="nav-link">Home</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/create" class="nav-link">Create Post</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/posts" class="nav-link">Posts</router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/notifications" class="nav-link">Notifications</router-link>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br/>
                    <!--                <transition name="fade">-->
                    <router-view></router-view>
                    <!--                </transition>-->
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>

<script type="text/babel">

    export default {}
</script>

Файл Webpack.mix содержит 

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

let productionSourceMaps = false;
if ( ! mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'eval-source-map'
    });
}

mix.sourceMaps(false, type = 'eval-source-map')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

bootstrap. js Файл содержит: 

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.baseURL = 'http://dshop.test';
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');

HomeComponent. vue содержит 

<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-default">
                <div class="card-header">Home Component</div>

                <div class="card-body">
                    I'm the Home Component component.
                </div>
            </div>
        </div>
    </div>
</template>

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

Теперь, когда я хочу отладить в Chrome, компоненты не показывают исходные компоненты

enter image description here

Пожалуйста, помогите мне! Какие конфигурации я пропустил, я не могу найти его.

С уважением

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Вы не можете видеть Vue компонент на этом пути. Установите плагин Vue dev tool по этой ссылке: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Тогда вы сможете увидеть это в своем браузере chrome: https://www.dropbox.com/s/fo0jpb4y1w0cv8k/Screenshot%202020-04-17%2010.26.52.png?dl=0

Обратите внимание, что для того, чтобы иметь возможность видеть вкладку Vue dev в ваших инструментах chrome dev, у вас должны быть ресурсы, созданные как dev. npm Запустите Dev или Watch Watch et et c .. Если вы запустите npm Запустите производство или производство пряжи, у вас не будет вкладки Vue, поскольку она не находится в режиме разработки.

0 голосов
/ 15 апреля 2020

возможно, попробуйте это расширение при отладке Vue, так как оно покажет структуры компонентов, реквизиты и многое другое: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

...