如何在 Laravel 8 模块中使用 InertiaJS 加载 Vue 组件
Posted
技术标签:
【中文标题】如何在 Laravel 8 模块中使用 InertiaJS 加载 Vue 组件【英文标题】：How to load Vue Component with InertiaJS in Laravel 8 Modules 【发布时间】：2021-04-09 07:51:04 【问题描述】：使用Laravel Modules 包
在 Laravel 8 中，我们可以使用 Inertiajs 加载组件
我们用这个@inertia在app.blade.php中初始化Inertia
之后在app.js文件中，我们可以这样初始化它：
const app = document.getElementById('app');
new Vue(
render: (h) =>
h(InertiaApp,
props:
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/$name`).default,
,
),
).$mount(app);
然后所有组件将从Pages 文件夹加载。
现在，我的问题是：
如何在模块中实现它？我想使用 Inertiajs 加载 Vuejs 组件。在模块中，这个Resources/assets/js/app.js 文件是空的。如果我将上面的代码放入其中并创建一个 Pages 文件夹，但它给了我错误！
import createApp, h from 'vue'
import App, plugin from '@inertiajs/inertia-vue3'
const el = document.getElementById('app')
createApp(
render: () => h(App,
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/$name`).default,
)
).use(plugin).mount(el)
在核心（我做了这个）模块master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module Core</title>
<link rel="stylesheet" href=" mix('css/core.css') ">
</head>
<body>
@inertia
<script src=" mix('js/core.js') "></script>
</body>
</html>
核心控制器：
use Inertia\Inertia;
class CoreController extends Controller
public function index()
return Inertia::render('Admin/Index');
我在assets/js/Pages/Admin/Index.vue有一个主页
我想加载这个。但是给我错误：
[Vue 警告]：创建钩子时出错：“错误：找不到模块 './Admin/Index'”
【问题讨论】：
【参考方案1】：检查你的 Index vue 页面是否在这个目录中：resources/js/Page/Admin 如果是，请复制您的 Index vue 页面中的所有内容并删除 Index vue 文件。 再次重新创建文件，但这次确保您输入了带有 .vue 扩展名的文件 然后再试一次
【讨论】：
【参考方案2】：Laravel 不再使用 js 文件夹中的 assets 文件夹。
所以正确的路径应该是
resources/js/app.js 不是Resources/assets/js/app.js
【讨论】：
以上是关于如何在 Laravel 8 模块中使用 InertiaJS 加载 Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章