标签: inertiajs

所以我正在使用 Inertia 和 Vue 开发 Laravel 8 应用程序。

这个想法是，大多数页面都是 Laravel + Blade（有利于 SEO、快速加载等...），但对于需要大量用户交互的选定页面，我在 Blade 模板中插入一个 Vue 组件，其中需要交互即将发生。

return Inertia::render('vueComponent')对于 Inertia，这是通过在 Laravel Route 调用的 Controller 中调用 Vue 组件来完成的。数据可以传递到 Vue 实例，甚至传递到 Blade 模板，所以这很好（见下文）。

namespace App\Http\Controllers;
use Inertia\Inertia;

class RangePageController extends Controller
{
    public function show(string $lang='fr')
    {
        // Strip the trailing slash from $lang
        $lang = Str::before($lang, '/');

        return Inertia::render('ProductsGallery', ['bar' => "Hello World"])->withViewData(['lang' => $lang]);
    }
}

默认情况下，文件“/resources/views/app.blade.php”使用 Vue 组件呈现，替换 @inertia 指令（加上一些 Vue 数据）。整洁的。

默认情况下，使用 Blade 布局文件“app.blade.php”。该文档指定可以更改默认值：Inertia\Inertia::setRootView('name');。

问题：有没有办法在从控制器调用不同页面时选择不同的 …

我们最近部署了一个 Laravel 应用程序，并在我们的应用程序上遇到了一些 Safari 版本的奇怪问题。

当在我们的应用程序上冲浪时，尤其是在用户未经授权的情况下，我们有时会在 Safari 上遇到请求/响应标头中不存在 XSRF 令牌的问题。

在申请表上，缺少令牌会导致 419 页面过期问题。

该问题仅有时出现在某些版本的 Safari 中。大多数情况下，重置缓存和 Cookie 可以解决 1 或 2 个表单请求的问题。

我彻底重置了 Safari

• 允许的 Cookie
• 允许追踪
• 禁用的插件

技术

我们使用 PHP 8.0 和最新的 Laravel 版本。对于前端，有一个 vue.js 应用程序，以惯性.js 作为连接器。关于将 csrf-token 传递到前端，不需要进一步配置来传递 csrf-token。（来源）

我尝试捕获 TokenMismatchExpection 但不可能只有 HTTPException 有效。

我的问题是：

• 有人遇到类似的问题吗？我怎样才能防止它们？

附上一些 Laravel 调试栏屏幕截图。

Safari 14.03 | 左侧 右侧镀铬

页面过期屏幕

我试图通过在 laravel惯性应用程序（VUE3）中导入来使用ziggy而不使用@routes，但我无法使用例如。Route('home').getting ctx.route 不是函数错误..请告诉我如何正确放置...

应用程序.js

        require('./bootstrap');

        // Import modules...
        import { createApp, h } from 'vue';
        import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
        import { InertiaProgress } from '@inertiajs/progress';
        import { Link } from '@inertiajs/inertia-vue3'
        import { ZiggyVue } from 'ziggy';
        import { Ziggy } from './ziggy';





        const el = document.getElementById('app');

        createApp({
            render: () =>
                h(InertiaApp, {
                    initialPage: JSON.parse(el.dataset.page),
                    resolveComponent: (name) => require(`./Pages/${name}`).default,
                }),
        })
        .use(InertiaPlugin, Link, ZiggyVue, Ziggy)
        // .mixin({ methods: { route } }) …

我如何在使用inertiajs（已安装vue3）时将vuetify 3（alpha）加载到我的应用程序中，目前我的app.js如下所示：

require('./bootstrap');
import { InertiaProgress } from '@inertiajs/progress';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { createVuetify } from 'vuetify'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    
    setup({ el, app, props,plugin }) {
        
        const vuetify=  createVuetify(
        )
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(vuetify)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

我真的需要帮助。

我找不到任何文档来解释 <template> 上的 #tags

例子：

<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/inertia-vue3';
import JetActionMessage from '@/Jetstream/ActionMessage.vue';
import JetButton from '@/Jetstream/Button.vue';
import JetFormSection from '@/Jetstream/FormSection.vue';
import JetInput from '@/Jetstream/Input.vue';
import JetInputError from '@/Jetstream/InputError.vue';
import JetLabel from '@/Jetstream/Label.vue';

const passwordInput = ref(null);
const currentPasswordInput = ref(null);

const form = useForm({
    current_password: '',
    password: '',
    password_confirmation: '',
});

const updatePassword = () => {
    form.put(route('user-password.update'), {
        errorBag: 'updatePassword',
        preserveScroll: true,
        onSuccess: () => form.reset(),
        onError: () …

我正在将现有的 laravel ineria 从 mix 迁移到 vit。

我完成了迁移指南中的所有步骤，除了一件事之外，一切正常。

我有一个组件接收一个包含组件数组的道具。

我曾经这样要求它们（在循环内）

...

this.$options.components[component_name] = require(`@/Pages/Components/Inputs/${component_name}`).default

...

由于“ require ”，这不适用于 vite，我必须将其替换为import

所以我尝试了这些方法，但没有一个有效

this.$options.components[component_name] = () => resolvePageComponent(`./Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))


this.$options.components[component_name] = () => resolvePageComponent(`@/Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

this.$options.components[component_name] = resolvePageComponent(`./Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

this.$options.components[component_name] = resolvePageComponent(`@/Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

他们都抛出相同的异常

"Uncaught (in promise) Error: Page not found: ./Pages/Components/Inputs/Text.vue".

我目前正在尝试创建 Laravel / Vite /Inertia 的生产版本，在完成构建（npm run build）时，我尝试使用该捆绑包，但出现以下错误：

Uncaught (in promise) Error: Unknown variable dynamic import: ./Pages/Auth/Login.vue

我的 vite.config.js 文件具有以下内容：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
            
        }),

        vue(),
    ],
    css: {
        postCss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },
    resolve: {
        alias: {
            '@images': path.resolve('./resources/images'),
        },
    },
    build: {
        chunkSizeWarningLimit: …

我花了一些时间使用 Inertia、Vite、Vue3 Composition API 和 Typescript 将应用程序重写为 Laravel 9。

一切都很顺利，当我通过运行npm run build捆绑生产的所有内容在本地环境上测试生产构建时，看起来不错。

现在我已经启动了新的代码库，但一半的网页无法正常工作..这是为什么？因为Vite无法解析我的动态导入。

npm run build我不明白我的本地（有效）与实时站点之间的区别npm run build...我知道npm run dev使用 es6bundling 而npm run build使用 rollup。

我有一个非常基本的设置，如下所示，currentHeader是动态组件：

<template>
    <component
        :is="currentHeader"
    />
</template>

我尝试了几种不同的方法，但没有任何效果。它仅在我对字符串路径进行硬编码时才有效，这会阻止我使其动态化

1 -我将所有路径从使用 @/ 更改为使用直接路径

2 -我尝试将动态导入的路径添加到vite.config.js

build: {
    rollupOptions: {
        external: [
            "./components/HeaderStandard.vue",
            "resources/js/Components/BitHeader/components/HeaderStandard.vue",
        ]
    }
}

3 -我尝试defineAsyncComponent像这样加载标题：

let headers = {
    secondary: './components/HeaderSecondary.vue',
    standard: './components/HeaderStandard.vue'
}
const …

我有一个使用 Laravel Inertia 和 Vue Js 的项目。这些天我遇到了 csrf 令牌的问题。我已经阅读了这里的文档https://inertiajs.com/csrf-protection，所以也许我应该在每个惯性请求/响应上添加 csrf 令牌。

我的问题是，如何全局添加这个_token？所以我不需要一一添加令牌到我的vue文件中，因为它的文件太多了。

我当前在login.vue上的脚本代码：

props: {
        errors: Object,
        session: Object,
        auth: Array
    },

    //define composition API
    setup(props) {
        //define form state
        const form = reactive({
            email: '',
            password: '',
        });

        //submit method
        const submit = () => {

            //send data to server
            Inertia.post('/login', {

                //data
                email: form.email,
                password: form.password,
                _token: props.auth.csrf
            });
        }

我的 HandleInertiaRequest （中间件）：

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    /** …

在支持 scss 的情况下，将 BootStrap 与 Adonis 和 Inertia 一起使用时出错。

几天来我一直在努力让它发挥作用，但我做不到。下面是配置。

有人知道我该如何解决这个问题吗？

感谢您的关注

webpack.config.js

Encore.enableSassLoader()

应用程序.scss

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

$primary: #000;

@import '~bootstrap/scss/bootstrap';

错误

模块警告（来自 ./node_modules/sass-loader/dist/cjs.js）：弃用 不推荐将百分比单位传递给全局 abs() 函数。将来，这将发出一个由浏览器解析的 CSS abs() 函数。保留当前行为：math.abs(100%) 现在发出 CSS abs()：abs(#{100%}) 更多信息： https://sass-lang.com/d/abs-percent

resources\scss\app.scss 1:1 除法() node_modules\bootstrap\scss\mixins_grid.scss 59:12 row-cols() node_modules\bootstrap\scss\mixins_grid.scss 85:13 @content node_modules\bootstrap\scss\ mixins_breakpoints.scss 68:5 media-breakpoint-up() node_modules\bootstrap\scss\mixins_grid.scss 72:5 make-grid-columns() node_modules\bootstrap\scss_grid.scss 38:3 @import node_modules\bootstrap\scss\ bootstrap.scss 20:9 @import resources\scss\app.scss 9:9 根样式表 [ encore ] ./resources/scss/app.scss 中的警告 (./resources/scss/app.scss.webpack[javascript/auto ]!=!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13.use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13.use[2 ]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13.use[3]!./resources/scss/app.scss) 模块警告（来自 ./node_modules/sass-loader/dist/ cjs.js): 弃用 不推荐将百分比单位传递给全局 abs() 函数。将来，这将发出一个由浏览器解析的 CSS abs() …