在 vite.config.js 中更改 outDir 后找不到 Vite 清单

Question

When I changed outDir: "public" to laravel 9.41, throwing an error.

Vite manifest not found at: E:\oblia\obilia_site\public\build/manifest.json

Why is Vite looking for manifest in the build directory when I changed it to public? The app is running fine when I am running npm run dev , but when is stop dev and ran npm run build , I get this error. I want all my assets to be in public, not in public/build.

vite.config.js

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import laravel from "laravel-vite-plugin";

export default defineConfig({
  base: "/",
  build: {
    outDir: "public",
    emptyOutDir: false,
  },

  plugins: [
    laravel({
      input: [
        "resources/css/bootstrap.min.css",
        "resources/css/font-awesome.min.css",
        "resources/css/feather.css",
        "resources/css/owl.carousel.min.css",
        "resources/css/magnific-popup.min.css",
        "resources/css/lc_lightbox.css",
        "resources/css/bootstrap-select.min.css",
        "resources/css/dataTables.bootstrap5.min.css",
        "resources/css/select.bootstrap5.min.css",
        "resources/css/dropzone.css",
        "resources/css/scrollbar.css",
        "resources/css/datepicker.css",
        "resources/css/flaticon.css",
        "resources/css/notiflix.min.css",
        "resources/css/style.scss",
        "resources/css/override.scss",
        //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        "resources/js/jquery-3.6.0.min.js",
        "resources/js/popper.min.js",
        "resources/js/bootstrap.min.js",
        "resources/js/magnific-popup.min.js",
        "resources/js/waypoints.min.js",
        "resources/js/counterup.min.js",
        "resources/js/waypoints-sticky.min.js",
        "resources/js/isotope.pkgd.min.js",
        "resources/js/imagesloaded.pkgd.min.js",
        "resources/js/owl.carousel.min.js",
        "resources/js/theia-sticky-sidebar.js",
        "resources/js/lc_lightbox.lite.js",
        "resources/js/bootstrap-select.min.js",
        "resources/js/dropzone.js",
        "resources/js/jquery.scrollbar.js",
        "resources/js/bootstrap-datepicker.js",
        "resources/js/jquery.dataTables.min.js",
        "resources/js/dataTables.bootstrap5.min.js",
        "resources/js/anm.js",
        "resources/js/notiflix.min.js",
        "resources/js/bootstrap-slider.min.js",
        "resources/js/chart.js",
        "resources/js/custom.js",
        "resources/js/app.js",
        "resources/js/init.js",
      ],
      refresh: true,
    }),
    viteStaticCopy({
      targets: [
        { src: "resources/images", dest: "" },
        { src: "resources/fonts", dest: "" },
        { src: "resources/files", dest: "" },
      ],
    }),
  ],
});

I am not used to Vite.

Answer 1

You need to configure the outDir at the Laravel side of things as well.

After digging through the source code I found Illuminate/Foundation/Vite::useBuildDirectory https://github.com/laravel/framework/blob/6939c04d81abdbed300aba08208fcf88b37e3889/src/Illuminate/Foundation/Vite.php#L192 This is likely what you missed in configuring the new build directory.

The manifest is expected to be found at public_path($buildDirectory.'/'.$this->manifestFilename); with $buildDirectory having a default of build , and $this->manifestFilename a default of manifest.json . so thats how your E:\oblia\obilia_site\public\build/manifest.json came to be, with E:\oblia\obilia_site\public being your (default) public path.

If you configure the $buildDirectory as "." everything should work out. You can find an example of how these things can be done in the Laravel documentation under advanced customization in Vite.

The following code should do the trick instead of the @vite directive inside of your main template

{{ Vite::useBuildDirectory('.') }}