如何使用Vite构建可在页面<head>引用的资源文件及正确配置？

首先，你完全没必要手动写环境判断代码——Laravel 集成的 @vite 指令本身就会自动区分环境：

• 本地开发时，它会指向 Vite 开发服务器的热更新资源
• 生产环境下，它会自动加载你构建后的静态资源文件

直接在模板里保留这一行就行，不用写 @if 分支：

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

如果你想实现类似 Webpack 那样，把所有资源打包成固定的 app.css 和 app.js（不带哈希后缀），只需修改项目根目录的 vite.config.js，配置 Rollup 的输出规则：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                // 配置 JS 输出文件名
                entryFileNames: 'assets/app.js',
                // 配置 CSS 输出文件名
                assetFileNames: 'assets/app.css',
                // 如果有代码分割的 chunk，也可以统一命名
                chunkFileNames: 'assets/chunk.js',
            }
        }
    }
});

配置完成后，运行 npm run build，Vite 就会把打包好的 app.css 和 app.js 输出到 public/assets 目录下，@vite 指令会自动引用这些文件，完全不用你手动写 <link> 和 <script> 标签。

另外补充一点：如果想保留哈希后缀（利于浏览器缓存更新），可以把文件名改成带 [hash] 的格式，比如 entryFileNames: 'assets/app.[hash].js'，@vite 同样会自动处理资源引用，不需要你手动修改模板路径。

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