在 chrome 中调试 Vue 不显示原始的 vue 组件

Question

我是 Vue Js 的新手。我正在使用 Vue js 在 Laravel 7.* 中开发一个项目。
我的 Vue 项目结构

app.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');

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 中调试时，组件不显示原始组件

请帮帮我！遗漏了哪些配置我找不到了。

问候

Answer 1

这种方式看不到 Vue 组件。按照此链接安装 Vue 开发工具插件： 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

请注意，为了能够在您的 chrome 开发工具中看到 Vue 开发选项卡，您必须将资产构建为开发。 npm run dev 或 yarn watch 等。如果你运行 npm run production 或 yarn production，你将不会有 Vue 选项卡，因为不是处于开发模式。

Answer 2

也许在尝试调试 Vue 时尝试这个扩展，因为它会显示组件结构、道具等等：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd