带有 Laravel Blade 模板的 Vue 3 不适用于生产构建答案

【问题标题】：Vue 3 with Laravel Blade template doesn't work on production build带有 Laravel Blade 模板的 Vue 3 不适用于生产构建
【发布时间】：2023-01-23 19:33:16
【问题描述】：

我正在尝试在常规 Laravel Blade 文件中使用带有模板的 Vue 3 SFC，如下所示：

测试.vue

<script setup>

import { ref} from 'vue';

const testValue = ref('Works');

</script>

应用程序刀片.php

<head>
    @stack('js')
</head>

<body>
    <div id="app">
        @yield('content')
    </div>
</body>

</html>

测试.blade.php

@extends('layouts.app')
@push('js')
    @vite(['resources/js/test.js'])
@endpush
@section('content')
    <span>@{{ testValue }}</span>
@endsection

测试.js

import { createApp } from 'vue';
import Test from "./components/Test.vue";
const app = createApp(Test).mount("#app");

我知道这很复杂，我应该在 SFC 中编写模板，但我更喜欢使用刀片文件，运行后效果很好npm 运行开发:

然而，运行后npm 运行构建我看到一个没有刀片文件模板的空白页。

有谁知道这是什么原因以及如何让它发挥作用？这是我的配置：

vite.js.config

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

export default defineConfig({
        server: {
            hmr: true,
            https: false,
            host: 'localhost',
            proxy: {
                // Proxying websockets or socket.io
                '/app': {
                    target: 'wss://localhost:6001',
                    ws: true
                }
            }
        },
        plugins: [
            laravel(
                {
                    input: [
                        'resources/js/test.js',
                    ],
                    refresh: true,
                }),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },
                },
            }),
        ],
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.esm-bundler.js',
            },
        },
        build: {
            chunkSizeWarningLimit: 1000,
        },
        define: {
            __VUE_PROD_DEVTOOLS__: true,
            __VUE_OPTIONS_API__: true,
        }
    });

【问题讨论】：

标签： laravel vue.js npm vuejs3 vite

【解决方案1】：

将 app.blade.php 中的 @stack('js') 移动到 body 标签内。就在你合上身体之前。

【讨论】：