我已经使用 php artisan auth:ui 安装了新的 Laravel 项目当前版本 10.6.2 和基本的 AUTH 脚手架，它通过 vite 安装成功创建。但是当我运行该项目时，它显示错误“无法在 Vite 清单中找到文件：resources/sass/app.scss。” vite auth 配置
我检查了两次并尝试手动创建文件
删除供应商并更新作曲家
npm install --save-dev vite laravel-vite-plugin npm install --save-dev @vitejs/plugin-vue （也尝试 sass，bootstrap => 这会导致错误）
最后每次尝试后再次 npm run build 。
要正确安装和编译 vite 包而不出现任何问题，您需要执行以下步骤：
1- 安装node.js（如果您已经安装了它，只需转到项目内的终端并给出命令：
node -v
，如果能给出版本号，则表示：完成）。
2- 在您的设备上安装 npm（不用担心：如果您已成功安装了 Node.js，它将与 Node 一起安装，并在终端中测试该命令的类型：
npm -v
，如果能给出版本号，则表示：完成）。
3- 现在您需要开始使用 Vite 和 Laravel 插件，方法是在终端中输入下一个命令：
npm install , or just: npm i
并等待几秒钟，直到它给您一条消息说它已成功安装，然后打开文件 vite.config.js 并确保该文件包含： 2 个进口代码和 1 个出口代码 像这样：
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,
}),
],
});
4-在此步骤中，您将在视图文件中包含 vite 包，例如 home.blade.php 在 html 代码的头部
<!doctype html>
<head>
{{-- ... --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
5-最后你需要在终端中使用以下命令运行 npm：
npm run dev
npm run build
请记住：每次在浏览器中运行并打开项目时，您都需要执行最后一步
祝你有美好的一天，祝你好运。
你使用 rollupOptions 吗？我已经多次遇到这个错误，每次都是在代码中编写 rollupOptions 。就我而言，我不再使用它，见下文
Unable to locate file in Vite manifest: resources/css/app.cssimport { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import { resolve } from 'path';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
],
build: {
rollupOptions: {
input: {
app: resolve(__dirname, 'resources/js/app.js')
},
output: {
entryFileNames: 'assets/[name].[hash].js',
chunkFileNames: 'assets/[name].[hash].js',
assetFileNames: 'assets/[name].[hash].[ext]'
},
},
},
});
import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
})
]
});
这也适用于我的配置的下面的示例，该示例更广泛，并且使用插件并执行构建后的 bash/php 操作，这可能会启发您：
import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import shell from 'shelljs';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { normalizePath } from 'vite';
import path from 'node:path';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/vendor/bootstrap/css/bootstrap.min.css',
'resources/vendor/fontawesome-6.5.2/css/all.min.css',
'resources/vendor/formvalidation/formValidation.min.css',
'resources/vendor/bootstrap-sweetalert/sweet-alert.css',
'resources/vendor/leaflet/leaflet.css',
'resources/js/app.js'
],
refresh: true,
}),
viteStaticCopy({
targets:
[
{
src: normalizePath(path.resolve(__dirname, 'resources/downloads/**')),
dest: normalizePath(path.resolve(__dirname, 'public/build/downloads'))
},
{
src: normalizePath(path.resolve(__dirname, 'resources/documents/**')),
dest: normalizePath(path.resolve(__dirname, 'public/build/documents'))
},
]
}),
],
assetsInclude: ['**/*.del', '**/*.4'],
// Hook post-build
postBuild() {
shell.exec('php artisan clean:publicFolder');
}
});
在 resources/js/app.js 中：
import '../css/app.css';
import '../vendor/bootstrap/css/bootstrap.min.css';
import '../vendor/fontawesome-6.5.2/css/all.min.css';
import '../vendor/formvalidation/formValidation.min.css';
import '../vendor/bootstrap-sweetalert/sweet-alert.css';
import '../vendor/leaflet/leaflet.css';
import '../vendor/jquery/jquery-3.7.1.min';
import '../vendor/bootstrap/js/bootstrap.bundle.min';
// etc.