Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】_网络技术

Laravel 10+ 默认用 Vite 因其启动快、热更新毫秒级、原生支持 ES 模块和 TypeScript，而 Mix 基于 Webpack，启动慢、配置重、对现代前端生态支持滞后。

为什么 Laravel 10+ 默认用 Vite 而不是 Mix

因为 Vite 启动快、热更新毫秒级、原生支持 ES 模块和 TypeScript，而 Mix 基于 Webpack，启动慢、配置重、对现代前端生态支持滞后。Laravel 10 是首个将 vite 作为默认构建工具的 LTS 版本，npm run dev 实际调用的是 vite 而非 webpack-dev-server。

如果你刚从 Laravel 9 升级上来，会发现 webpack.mix.js 文件没了，resources/js/app.js 开头多了 import './bootstrap';，且 public/mix-manifest.json 不再生成 —— 这些都是 Vite 接管编译的信号。

如何在 Blade 中正确引入 Vite 编译后的资源

Laravel 提供了 @vite 指令自动注入开发时的 HMR 脚本（http://localhost:5173/@vite/client）和生产环境的静态资源链接，它比手写安全得多，能自动处理哈希、代码分割和 CSS 注入。

@vite 必须放在内，否则 HMR 失效；不能用在子视图（@include）中动态拼接路径
多个入口文件要显式列出：@vite(['resources/js/app.js', 'resources/js/pages/dashboard.js'])
如果用了 SSR 或 Inertia，需额外加 @viteReactRefresh（仅开发环境），否则组件更新不触发重渲染
生产环境运行 npm run build 后，@vite 会自动读取 public/build/manifest.json 映射真实文件名

修改 Vite 配置：比如添加别名或调整端口

所有自定义都写在项目根目录的 vite.config.js 中，而不是 Laravel Mix 那套。Laravel 官方脚手架已预置基础配置，但你很可能需要改：

添加 @/ 别名指向 resources/js：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
    server: {
        host: 'localhost',
        port: 5173,
        hmr: { overlay: false }, // 关闭浏览器错误浮层（适合 CI 或特定 UI）
    },
});

注意 laravel-vite-plugin 的 input 数组决定哪些文件被监听和输出；漏掉的 JS/CSS 不会进构建流程
Vite 不支持 Webpack 那种 mix.webpackConfig 的“补丁式”配置，所有改动必须在 vite.config.js 里显式声明

常见报错与绕过方式

Vite 和 Laravel 集成虽顺滑，但几个典型错误容易卡住：

504 Gateway Timeout 或 ERR_CONNECTION_REFUSED：检查 vite dev server 是否真的在运行（npm run dev），Blade 中的 @vite 不会自动启服务
Cannot find module '@/components/Example.vue'：确认 vite.config.js 中 resolve.alias 已生效，且 VS Code 等编辑器没缓存旧路径提示
生产环境 JS 报 Failed to fetch dynamically imported module：说明代码分割后 chunk 路径错乱，检查是否误删了 public/build 目录下除 manifest.json 外的其他文件，或 Nginx/Apache 没配好静态文件路由
Inertia 页面切换白屏：确认 app.js 中已执行 createInertiaApp，且 @vite 在里，不在底部

Vite 的构建产物结构和加载逻辑跟 Webpack 有本质差异，直接套用 Mix 经验容易踩坑 —— 尤其是资源路径、模块解析和 HMR 生命周期这几个点，得按 Vite 的方式重新理解一遍。

# css # vue # react # laravel # js # 前端 # bootstrap # json # vite # typescript # nginx # gateway # npm # webpack # include # public

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】