laravel - Laravel 8 - Jetstream +惯性.js - Vue开发工具不起作用
问题描述
我有一个使用 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);
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>
解决方案
我在 chrome 和 opera gx 中遇到了同样的问题,我的解决方案是:
- 安装Vue.js devtools beta;
- 关闭并重新打开您的浏览器。
推荐阅读
- heroku - Heroku GUI 在多种情况下显示“未知错误”
- javascript - rollup.js - 如何加载捆绑的 CSS?
- mysql - Amazon VPC:将默认 VPC 服务器连接到非默认 VPC 服务器
- python - 在规则中的函数中使用通配符
- spring-kafka - 如何访问 SCDF 流中的源本机标头?
- pandas - 与首先选择列相比,对整个数据框进行分组,然后是过滤列是否占用更多内存?
- intellij-idea - IntelliJ - 前一天的提示
- rtmp - RTMP客户端什么时候发起deletestream()的操作
- datetime - 在 Azure 突触复制数据工具期间添加具有当前日期的附加列
- java - 如何在 ViewPage 中从 Activity 移动到 Fragment?未找到片段 ID 的视图