Fatal编程技术网
  • laravel/
  • Laravel-新VueJS和惯性应用程序出现错误：不要将Vue安装到<；html>；或<；车身>；-改为安装到普通元件

Laravel-新VueJS和惯性应用程序出现错误：不要将Vue安装到<；html>；或<；车身>；-改为安装到普通元件

laravel vue.js

Laravel-新VueJS和惯性应用程序出现错误：不要将Vue安装到<；html>；或<；车身>；-改为安装到普通元件,laravel,vue.js,inertiajs,Laravel,Vue.js,Inertiajs,我刚刚在一个使用vuejs（v2）的应用程序上重新安装了inertia，出现以下错误： [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead. app-ihf.js import { App, plugin } from '@inertiajs/inertia-vue' import Vue from 'vue' import { InertiaProgre

我刚刚在一个使用vuejs（v2）的应用程序上重新安装了inertia，出现以下错误：

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
app-ihf.js

import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'
import { InertiaProgress } from '@inertiajs/progress'

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
    render: h => h(App, {
        props: {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(el)

InertiaProgress.init()
master.blade.php

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/css/app-ihf.css">
    <script src="{{ mix('/js/app-ihf.js') }}"></script>
</head>
<body>
    @inertia
</body>
</html>


@惯性
有人能看到这里出了什么问题吗？这是访问该路线时的html

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/css/app-ihf.css?id=fc17ae1fae0b57440a59">
    <script src="/js/app-ihf.js?id=fa7eba2a2c660c498a3e"></script>
</head>
<body>
    <div id="app" data-page="{&quot;component&quot;:&quot;master&quot;,&quot;props&quot;:{&quot;errors&quot;:{}},&quot;url&quot;:&quot;\/test&quot;,&quot;version&quot;:&quot;3993c0d73e25e92aa0e15607a6c438ef&quot;}"></div>


</body></html>
我遇到了完全相同的问题，这是因为我没有将
延迟
放入脚本标记中，因此app.js中的JavaScript在页面上存在
id=“app”
元素之前运行

因此，在您的情况下，您需要：

<script src="{{ mix('/js/app-ihf.js') }}" defer></script>
你也可以分享你的惯性中间件配置吗？这就是它，谢谢。 
<script src="{{ mix('/js/app-ihf.js') }}" defer></script>