为什么我不能引用将 inertiajs 添加到我的项目的应用程序布局文件？
Why I can not reference app layout file adding inertiajs to my project?
在 Laravel 8 应用中，管理区域是用 jquery/bootstrap 实现的，我需要用
inertiajs/vuejs3。
所以我用 vuejs3 安装了 inertiajs 并添加了前端模板 resources/views/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">
<title inertia>{{ 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="/css/frontend.css">
<link rel="stylesheet" href="/css/main.css">
<!-- Scripts -->
@routes
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="/js/frontend_app.js" defer></script>
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
在 resources/js/frontend_app.js 中：
require('./bootstrap');
import { InertiaProgress } from '@inertiajs/progress';
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel 0987';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.component('inertia-link', Link)
.mount(el)
},
})
InertiaProgress.init({ color: '#4B5563' });
但我有一个问题，我无法引用应用程序布局文件 resources/js/Layouts/AppLayout.vue，其内容为：
<template>
<div class="flex flex-col min-h-screen">
<nav class="bg-white border-b border-gray-100 w-full fixed z-20">
resources/js/Layouts/AppLayout.vue
</nav>
<div class="flex flex-wrap pt-16 sm:flex-nowrap">
<!-- Page Sidebar -->
<!-- Page Content -->
<main class="bg-gray-200 shadow rounded my-5 py-6 px-4 w-full sm:w-2/3 sm:mx-2 sm:my-3 md:mx-4 md:px-10 lg:mx-auto">
<slot></slot>
</main>
</div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
mounted() {
},
methods: {
logout() {
this.$inertia.post(route('logout'));
},
}
}
</script>
但试图在 resources/js/Pages/api/home/index.vue 中使用它：
<template>
<app-layout title="Profile">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
</template>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
components: {
AppLayout,
}
}
</script>
我在浏览器的控制台中遇到错误：
ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'
在我看来，我有有效的路径...
我是否遗漏了 inertiajs setip 中的某些内容？
在composer.json中：
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.4.5",
"jenssegers/date": "^4.0",
"laravel/fortify": "^1.8",
"laravel/framework": "^8.0",
"laravel/telescope": "^4.6",
"laravel/tinker": "^2.0",
"mews/purifier": "^3.3",
"proengsoft/laravel-jsvalidation": "^4.5.1",
"spatie/laravel-medialibrary": "^9.9",
"spatie/laravel-permission": "^5.4",
"tightenco/ziggy": "^1.4",
"laravel/jetstream": "^2.4",
"wboyz/laravel-enum": "^0.2.1"
},
"require-dev": {
"facade/ignition": "^2.3.6",
"fakerphp/faker": "^1.9.1",
"mockery/mockery": "^1.3.1",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"files": [
"app/Library/helper.php"
],
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
}
}
package.json :
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21.4",
"browser-sync": "^2.27.5",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.31",
"lodash": "^4.17.19",
"postcss": "^8.3.6",
"resolve-url-loader": "^4.0.0",
"sass": "^1.40.1",
"sass-loader": "^12.1.0",
"vue": "^3.0.5",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@inertiajs/inertia": "^0.10.1",
"@inertiajs/inertia-vue3": "^0.5.2",
"@inertiajs/progress": "^0.2.6",
"@popperjs/core": "^2.10.1",
"bootstrap": "^5.1.1",
"moment": "^2.29.1",
"simplebar": "^5.3.5"
}
}
已修改 1：
阅读此 https://github.com/tighten/ziggy 文档并与我之前的一个应用程序进行比较
这是使用 --jet 选项创建的，并且选择了 inertiajs 我在 webpack.mix.js 的顶部添加了几行：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
const path = require('path')
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
mix
/* CSS */
.sass('resources/sass/main.scss', 'public/css/oneui.css')
.sass('resources/sass/frontend.scss', 'public/css/frontend.css')
.sass('resources/sass/oneui/themes/amethyst.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/city.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/flat.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/modern.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/smooth.scss', 'public/css/themes/')
/* JS */
.js('resources/js/app.js', 'public/js/laravel.app.js')
.js('resources/js/oneui/app.js', 'public/js/oneui.app.js')
.js('resources/js/frontend_app.js', 'public/js').vue()
/* Page JS */
.js('resources/js/pages/tables_datatables.js', 'public/js/pages/tables_datatables.js')
/* Tools */
// .browserSync('localhost:8000')
// .disableNotifications()
/* Options */
.options({
processCssUrls: false
});
mix.copy(
"vendor/proengsoft/laravel-jsvalidation/resources/views",
"resources/views/vendor/jsvalidation"
).copy(
"vendor/proengsoft/laravel-jsvalidation/public",
"public/vendor/jsvalidation"
);
但这并没有帮助，我仍然出现同样的错误:
ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'
而且我认为我仍然有有效的路径:
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
components: {
AppLayout,
}
}
谢谢！
您需要为布局文件夹添加别名：
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
'@Layouts': path.resolve(__dirname, 'path/to/layouts')
},
},
});
并将它们用作：
import AppLayout from '@Layouts/AppLayout'
在 Laravel 8 应用中，管理区域是用 jquery/bootstrap 实现的，我需要用 inertiajs/vuejs3。 所以我用 vuejs3 安装了 inertiajs 并添加了前端模板 resources/views/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">
<title inertia>{{ 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="/css/frontend.css">
<link rel="stylesheet" href="/css/main.css">
<!-- Scripts -->
@routes
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="/js/frontend_app.js" defer></script>
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
在 resources/js/frontend_app.js 中：
require('./bootstrap');
import { InertiaProgress } from '@inertiajs/progress';
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel 0987';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.component('inertia-link', Link)
.mount(el)
},
})
InertiaProgress.init({ color: '#4B5563' });
但我有一个问题，我无法引用应用程序布局文件 resources/js/Layouts/AppLayout.vue，其内容为：
<template>
<div class="flex flex-col min-h-screen">
<nav class="bg-white border-b border-gray-100 w-full fixed z-20">
resources/js/Layouts/AppLayout.vue
</nav>
<div class="flex flex-wrap pt-16 sm:flex-nowrap">
<!-- Page Sidebar -->
<!-- Page Content -->
<main class="bg-gray-200 shadow rounded my-5 py-6 px-4 w-full sm:w-2/3 sm:mx-2 sm:my-3 md:mx-4 md:px-10 lg:mx-auto">
<slot></slot>
</main>
</div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
mounted() {
},
methods: {
logout() {
this.$inertia.post(route('logout'));
},
}
}
</script>
但试图在 resources/js/Pages/api/home/index.vue 中使用它：
<template>
<app-layout title="Profile">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
</template>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
components: {
AppLayout,
}
}
</script>
我在浏览器的控制台中遇到错误：
ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'
在我看来，我有有效的路径... 我是否遗漏了 inertiajs setip 中的某些内容？
在composer.json中：
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.4.5",
"jenssegers/date": "^4.0",
"laravel/fortify": "^1.8",
"laravel/framework": "^8.0",
"laravel/telescope": "^4.6",
"laravel/tinker": "^2.0",
"mews/purifier": "^3.3",
"proengsoft/laravel-jsvalidation": "^4.5.1",
"spatie/laravel-medialibrary": "^9.9",
"spatie/laravel-permission": "^5.4",
"tightenco/ziggy": "^1.4",
"laravel/jetstream": "^2.4",
"wboyz/laravel-enum": "^0.2.1"
},
"require-dev": {
"facade/ignition": "^2.3.6",
"fakerphp/faker": "^1.9.1",
"mockery/mockery": "^1.3.1",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"files": [
"app/Library/helper.php"
],
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
}
}
package.json :
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21.4",
"browser-sync": "^2.27.5",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.31",
"lodash": "^4.17.19",
"postcss": "^8.3.6",
"resolve-url-loader": "^4.0.0",
"sass": "^1.40.1",
"sass-loader": "^12.1.0",
"vue": "^3.0.5",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@inertiajs/inertia": "^0.10.1",
"@inertiajs/inertia-vue3": "^0.5.2",
"@inertiajs/progress": "^0.2.6",
"@popperjs/core": "^2.10.1",
"bootstrap": "^5.1.1",
"moment": "^2.29.1",
"simplebar": "^5.3.5"
}
}
已修改 1： 阅读此 https://github.com/tighten/ziggy 文档并与我之前的一个应用程序进行比较 这是使用 --jet 选项创建的，并且选择了 inertiajs 我在 webpack.mix.js 的顶部添加了几行：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
const path = require('path')
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
},
},
});
mix
/* CSS */
.sass('resources/sass/main.scss', 'public/css/oneui.css')
.sass('resources/sass/frontend.scss', 'public/css/frontend.css')
.sass('resources/sass/oneui/themes/amethyst.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/city.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/flat.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/modern.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/smooth.scss', 'public/css/themes/')
/* JS */
.js('resources/js/app.js', 'public/js/laravel.app.js')
.js('resources/js/oneui/app.js', 'public/js/oneui.app.js')
.js('resources/js/frontend_app.js', 'public/js').vue()
/* Page JS */
.js('resources/js/pages/tables_datatables.js', 'public/js/pages/tables_datatables.js')
/* Tools */
// .browserSync('localhost:8000')
// .disableNotifications()
/* Options */
.options({
processCssUrls: false
});
mix.copy(
"vendor/proengsoft/laravel-jsvalidation/resources/views",
"resources/views/vendor/jsvalidation"
).copy(
"vendor/proengsoft/laravel-jsvalidation/public",
"public/vendor/jsvalidation"
);
但这并没有帮助，我仍然出现同样的错误:
ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'
而且我认为我仍然有有效的路径:
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
components: {
AppLayout,
}
}
谢谢！
您需要为布局文件夹添加别名：
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
'@Layouts': path.resolve(__dirname, 'path/to/layouts')
},
},
});
并将它们用作：
import AppLayout from '@Layouts/AppLayout'