堆栈内存溢出
  繁体   English   中英

为什么我不能引用将惯性js添加到我的项目的应用程序布局文件？

[英]Why I can not reference app layout file adding inertiajs to my project?

 原文  2021-12-21 08:08:18  7   1    laravel/ inertiajs

问题描述

在使用 jquery/bootstrap 实现管理区域的 Laravel 8 应用程序中，我需要使用惯性js/vuejs3 制作前端。 所以我用 vuejs3 安装了惯性js，并添加了前端模板资源/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>

在资源/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'

在我看来，我有有效的路径......我错过了惯性 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 选项创建的应用程序之一进行比较，并选择了惯性 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,
    }
}

谢谢！

1 个解决方案

解决方案1
 1 已采纳  2021-12-21 11:46:06

您需要将别名添加到您的布局文件夹：

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
            '@Layouts': path.resolve(__dirname, 'path/to/layouts')
        },
    },
});

并将它们用作：

import AppLayout from '@Layouts/AppLayout'

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我在这个“添加自定义提供者”教程之后在我的 Laravel 项目中找不到“App\\Extensions\\RiakUserProvider”命名空间？ 如何使用 InertiaJs、Vue 和 Laravel 重新加载持久布局或观看道具 如何在 cPanel 中托管 Laravel 和 Inertiajs (React) 应用程序？ 为什么我不能改变我的laravel项目的生产模式？ 为什么惯性js/vuejs中的链接不是反应式的？ 为什么我无法从项目中获得所有路线？ 当我在项目中使用 laravel、vuejs 和 vuetify 并使用 treeshaking 概念时，如何减小 app.js 文件大小？ 如何测量惯性应用程序的页面加载性能 为什么我不能在我的 Laravel 项目中执行一些琐碎的 PHP 代码？ 如何将布局链接到资源/视图/上的资产？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM