Laravel 8 - Jetstream +惯性.js - Vue开发工具不起作用
Posted
技术标签:
【中文标题】Laravel 8 - Jetstream +惯性.js - Vue开发工具不起作用【英文标题】：Laravel 8 - Jetstream + inertia.js - Vue dev tools not working 【发布时间】：2021-05-30 09:05:57 【问题描述】：我有一个使用 Laravel 8、惯性 js、Vue.js 和 webpack 的项目。 VueJs chrome 开发工具不适用于该项目。它一直显示为未检测到，我尝试重新启动它，删除并读取开发工具。我已经检查了开发和生产，没有检测到 vuejs。任何帮助都会很棒。
App.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);
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");
app.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>
【问题讨论】：
【参考方案1】：我在 chrome 和 opera gx 中遇到了同样的问题，我的解决方案是：
-
安装Vue.js devtools beta;
关闭并重新打开您的浏览器。
【讨论】：
所以 Vue 3 需要 beta 版本，因为原来的扩展只能升级到 v2？ 当我给出答案时，我相信这是真的。现在最好测试一下。但是，我不确定该扩展在我回答时是否完全支持 vue3，或者只是轻微的不兼容。 火狐有测试版吗？？ 我认为是，这是我找到它的地方：devtools.vuejs.org/guide/installation.html#beta 可以确认这是必要的，截至 2021 年 8 月 26 日（Firefox 91.0.2、Vue 3.0.5、Vue devtools 5.3.4）- 安装测试版（版本 6.0.0.15）上面链接的 Carlos 确实诀窍。【参考方案2】：如果有人遇到同样的问题，chrome 扩展还需要 vuejs devtools 开发版本才能工作。但这遇到了另一个问题。 Vue 没有出现在开发/检查工具中。删除 chrome 主题并将其设置为默认设置会恢复此功能。
【讨论】：
以上是关于Laravel 8 - Jetstream +惯性.js - Vue开发工具不起作用的主要内容，如果未能解决你的问题，请参考以下文章