如何解决Laravel - Fresh VueJS 和 Inertia 应用程序给出错误：不要将 Vue 安装到 <html> 或 <body> - 改为安装到普通元素
我刚刚在使用 vuejs (v2) 的应用程序上重新安装了惯性并收到此错误：
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
但我不明白为什么它试图安装在这些元素上？据我所知，我遵循了惯性安装指南....
web.PHP
Route::get('test',function(){return \Inertia\Inertia::render('master');});
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="{"component":"master","props":{"errors":{}},"url":"\/test","version":"3993c0d73e25e92aa0e15607a6c438ef"}"></div>
</body></html>
解决方法
我遇到了完全相同的问题，这是因为我没有将 defer 放入脚本标记中，因此 app.js 中的 JavaScript 在页面上存在 id="app" 元素之前运行。>
所以在你的情况下你需要：
<script src="{{ mix('/js/app-ihf.js') }}" defer></script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
