为啥我不能引用将惯性js添加到我的项目的应用程序布局文件？
Posted
技术标签:
【中文标题】为啥我不能引用将惯性js添加到我的项目的应用程序布局文件？【英文标题】：Why I can not reference app layout file adding inertiajs to my project?为什么我不能引用将惯性js添加到我的项目的应用程序布局文件？ 【发布时间】：2022-01-22 16:32:03 【问题描述】：在使用 jquery/bootstrap 实现 adminarea 的 Laravel 8 应用程序中，我需要使用 惯性js/vuejs3。 所以我用 vuejs3 安装了惯性js，并添加了前端模板资源/视图/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>
在资源/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' );
但是我有一个问题，我不能引用app布局文件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'
在我看来，我有有效的路径...... 我错过了惯性设置中的某些内容吗？
在 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 选项创建的，并且选择了惯性js 我在 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,
谢谢！
【问题讨论】：
我认为问题出在@/Layouts/AppLayout.vue，你能从webpack/laravel-mix 分享你的别名配置吗：我猜应该是@Layouts/AppLayout.vue
感谢您的提示！请看 MODIFIED 1
【参考方案1】：
您需要在布局文件夹中添加别名：
mix.webpackConfig(
resolve:
alias:
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
'@Layouts': path.resolve(__dirname, 'path/to/layouts')
,
,
);
并将它们用作：
import AppLayout from '@Layouts/AppLayout'
【讨论】：
您能否详细说明 __dirnamevar 中的内容？我没有这样的var。第二个参数是 'resources/js/Layouts' ？ Layouts 子目录的完整路径？ @mstdmstd__dirname 是当前模块的目录 webpack.mix.js nodejs.org/docs/latest/api/modules.html#__dirname 这应该工作：'@Layouts': path.resolve(__dirname, 'resources/js/Layouts')以上是关于为啥我不能引用将惯性js添加到我的项目的应用程序布局文件？的主要内容，如果未能解决你的问题，请参考以下文章
我可以将 UITapGestureRecognizer 添加到我的控制器 self.view，但不能添加到任何自定义视图。为啥？
为啥每当我尝试将图像添加到我的 django 项目时都会出错？