如何在Laravel 11 + Vite中正确集成外部模板？

操作步骤 #

1. 迁移外部模板资源到项目目录 #

将外部模板的CSS、JS文件，以及依赖的图片、字体等静态资源，复制到项目的resources目录下。建议按类型分类存放，比如：

• CSS文件放到resources/css/（可新建templates子目录区分，如resources/css/templates/theme.css）
• JS文件放到resources/js/（同理resources/js/templates/theme.js）
• 静态资源（图片、字体）放到resources/images/、resources/fonts/对应目录

2. 修改Vite配置文件 #

打开项目根目录的vite.config.js，把外部模板的CSS和JS文件添加到input数组中，让Vite将其纳入编译流程：

//vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/css/templates/theme.css', // 新增外部模板CSS
                'resources/js/app.js',
                'resources/js/templates/theme.js' // 新增外部模板JS
            ],
            refresh: true,
        }),
    ],
});

3. 修正模板资源路径 #

外部模板的CSS/JS中可能存在相对路径引用的静态资源（如../images/bg.jpg），需要同步调整路径，确保指向resources目录下的对应文件。Vite会自动处理这些路径，编译后生成正确的静态资源URL。

4. 保持Blade模板调用不变 #

无需在Blade中手动新增<link>或<script>标签，原有的@vite(['resources/css/app.css', 'resources/js/app.js'])会自动加载Vite配置中所有input项对应的编译后资源。

5. 执行编译命令 #

• 开发环境：运行npm run dev启动Vite开发服务器，实时编译并热更新资源
• 生产环境：运行npm run build，将所有资源编译打包到public/build目录，用于线上部署

注意事项 #

• 如果外部模板的JS依赖第三方库（如jQuery），可直接在模板JS文件中通过import引入，Vite会自动处理依赖打包
• 若模板文件较多，可将分散的CSS/JS合并为单个文件后再加入input，减少编译后的资源数量

内容的提问来源于stack exchange，提问作者Roi