Laravel 8 - Jetstream + 惯性.js - Vue 开发工具不工作

Question

Laravel 8 - Jetstream + 惯性.js - Vue 开发工具不工作

Ash*_*er2 8 inertiajs laravel webpack vue.js vue-devtools

我有一个使用 Laravel 8、惯性 js、Vue.js 和 webpack 的项目。VueJs chrome 开发工具不适用于此项目。它一直显示为未检测到，我尝试重新启动它，删除并阅读开发工具。我已经检查了开发和生产，没有检测到 vuejs。任何帮助都会很棒。

应用程序.js

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

Run Code Online (Sandbox Code Playgroud)

wepack.mix.js

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

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .webpackConfig(require("./webpack.config"));

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps(false, "source-map");
}

Run Code Online (Sandbox Code Playgroud)

应用程序.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <!-- Scripts -->
        @routes
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Car*_*les 11

我在chrome和opera gx中遇到了同样的问题，我的解决方案是：

安装Vue.js devtools 测试版；
关闭并重新打开浏览器。

从 2021 年 8 月 26 日起可以确认这是必要的（Firefox 91.0.2、Vue 3.0.5、Vue devtools 5.3.4）——安装上面链接的测试版（版本 6.0.0.15）Carlos 就成功了。 (3认同)
我认为是的，这是我找到它的地方：https://devtools.vuejs.org/guide/installation.html#beta (2认同)

Answer 2

Ash*_*er2 1

如果有人遇到同样的问题，chrome 扩展还需要 vuejs devtools 开发版本才能工作。但这又遇到了另一个问题。Vue 没有出现在开发/检查工具中。删除 Chrome 主题并将其设置为默认值可以恢复此功能。

归档时间：	4 年，9 月前
查看次数：	3169 次
最近记录：	4 年，9 月前