Laravel 10,
laravel-vite-plugin – ^1.0.5,
vite – ^5.4.5
Below is my vite config.js
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
build: {
outDir: "public/build",
emptyOutDir: false,
assetsDir: "static",
sourcemap: true,
rollupOptions: {
input: {
"js/app": path.resolve(__dirname, "resources/js/app.js"),
"js/bootstrap": path.resolve(
__dirname,
"resources/js/bootstrap.js"
),
"js/vendor": path.resolve(__dirname, "resources/js/vendor.js"),
"js/sockets/bootstrap": path.resolve(
__dirname,
"resources/js/sockets/bootstrap.js"
),
"js/layouts/smart": path.resolve(
__dirname,
"resources/js/layouts/smart.js"
),
"js/libraries/cs": path.resolve(
__dirname,
"resources/js/libraries/cs.js"
),
"js/libraries/skin": path.resolve(
__dirname,
"resources/js/libraries/skin.js"
),
"js/libraries/vertex": path.resolve(
__dirname,
"resources/js/libraries/vertex.js"
),
"js/libraries/widget": path.resolve(
__dirname,
"resources/js/libraries/widget.js"
),
"js/app/layouts/bxslider": path.resolve(
__dirname,
"resources/js/app/layouts/bxslider.js"
),
"js/app/layouts/page": path.resolve(
__dirname,
"resources/js/app/layouts/page.js"
),
"js/app/layouts/portal": path.resolve(
__dirname,
"resources/js/app/layouts/portal.js"
),
"js/app/modules/admin/managing/listing/index": path.resolve(
__dirname,
"resources/js/app/modules/admin/managing/listing/index.js"
),
"js/app/modules/admin/member/member/index": path.resolve(
__dirname,
"resources/js/app/modules/admin/member/index.js"
),
"js/app/modules/admin/member/member/form": path.resolve(
__dirname,
"resources/js/app/modules/admin/member/form.js"
),
"js/config/core/dev/app": path.resolve(
__dirname,
"resources/js/config/core/dev/app.js"
),
"css/app": path.resolve(__dirname, "resources/css/app.css"),
"css/vendor": path.resolve(
__dirname,
"resources/css/vendor.css"
),
"css/app/layouts/cms": path.resolve(
__dirname,
"resources/css/app/layouts/cms.css"
),
"css/app/layouts/auth": path.resolve(
__dirname,
"resources/css/app/layouts/auth.css"
),
"css/app/layouts/page": path.resolve(
__dirname,
"resources/css/app/layouts/page.css"
),
"css/app/layouts/admin": path.resolve(
__dirname,
"resources/css/app/layouts/admin.css"
),
"css/app/layouts/portal": path.resolve(
__dirname,
"resources/css/app/layouts/portal.css"
),
},
output: {
entryFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.[hash].js`;
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
//return `${chunkInfo.name}.[hash].js`;
},
chunkFileNames: (chunkInfo) => {
if (chunkInfo.name.startsWith("js/")) {
return `${chunkInfo.name}.[hash].js`;
}
if (chunkInfo.name.startsWith("css/")) {
return `${chunkInfo.name}.css`;
}
//return `${chunkInfo.name}.[hash].js`;
},
assetFileNames: (assetInfo) => {
if (assetInfo.name?.endsWith(".css")) {
return `[name].[hash][extname]`;
}
if (assetInfo.name?.endsWith(".js")) {
return `js/[name].[hash][extname]`;
}
if (
assetInfo.name.startsWith("fonts/") ||
assetInfo.name.startsWith("vendor/")
) {
return `[name][extname]`;
}
return `[name].[hash][extname]`;
},
},
},
},
plugins: [
laravel({
input: [
"resources/css/app.css",
"resources/css/vendor.css",
"resources/css/app/layouts/cms.css",
"resources/css/app/layouts/auth.css",
"resources/css/app/layouts/page.css",
"resources/css/app/layouts/admin.css",
"resources/css/app/layouts/portal.css",
"resources/js/app.js",
"resources/js/bootstrap.js",
"resources/js/vendor.js",
"resources/js/sockets/bootstrap.js",
"resources/js/layouts/smart.js",
"resources/js/libraries/cs.js",
"resources/js/libraries/skin.js",
"resources/js/libraries/vertex.js",
"resources/js/libraries/widget.js",
"resources/js/app/layouts/bxslider.js",
"resources/js/app/layouts/page.js",
"resources/js/app/layouts/portal.js",
"resources/js/app/modules/admin/managing/listing/index.js",
"resources/js/app/modules/admin/member/member/index.js",
"resources/js/app/modules/admin/member/member/form.js",
"resources/js/config/core/dev/app.js",
],
refresh: true,
esm: true,
}),
],
});
This is my manifest.json file build after runnung npm prod build.
{
"resources/css/app.css": {
"file": "css/app.CNk80R6N.css",
"src": "resources/css/app.css",
"isEntry": true
},
"resources/css/app/layouts/admin.css": {
"file": "css/app/layouts/admin.qSM2Dncf.css",
"src": "resources/css/app/layouts/admin.css",
"isEntry": true
},
"resources/css/app/layouts/auth.css": {
"file": "css/app/layouts/auth.CgXVspRn.css",
"src": "resources/css/app/layouts/auth.css",
"isEntry": true
},
"resources/css/app/layouts/cms.css": {
"file": "css/app/layouts/cms.DqOcUH1V.css",
"src": "resources/css/app/layouts/cms.css",
"isEntry": true
},
"resources/css/app/layouts/page.css": {
"file": "css/app/layouts/page.EEtcLhQm.css",
"src": "resources/css/app/layouts/page.css",
"isEntry": true
},
"resources/css/app/layouts/portal.css": {
"file": "css/app/layouts/portal.Dc-ro14i.css",
"src": "resources/css/app/layouts/portal.css",
"isEntry": true
},
"resources/css/vendor.css": {
"file": "css/vendor.C5ruzaah.css",
"src": "resources/css/vendor.css",
"isEntry": true
},
"resources/js/app.js": {
"file": "js/app.CnL08CsG.js",
"name": "js/app",
"src": "resources/js/app.js",
"isEntry": true
},
"resources/js/app/layouts/bxslider.js": {
"file": "js/app/layouts/bxslider.DzL8e1Hr.js",
"name": "js/app/layouts/bxslider",
"src": "resources/js/app/layouts/bxslider.js",
"isEntry": true
},
"resources/js/app/layouts/page.js": {
"file": "js/app/layouts/page.DrJWWN61.js",
"name": "js/app/layouts/page",
"src": "resources/js/app/layouts/page.js",
"isEntry": true
},
"resources/js/app/layouts/portal.js": {
"file": "js/app/layouts/portal.CW5bVUqY.js",
"name": "js/app/layouts/portal",
"src": "resources/js/app/layouts/portal.js",
"isEntry": true
},
"resources/js/app/modules/admin/managing/listing/index.js": {
"file": "js/app/modules/admin/managing/listing/index.BcXq96BO.js",
"name": "js/app/modules/admin/managing/listing/index",
"src": "resources/js/app/modules/admin/managing/listing/index.js",
"isEntry": true
},
"resources/js/app/modules/admin/member/form.js": {
"file": "js/app/modules/admin/member/member/form.CwcMkPk1.js",
"name": "js/app/modules/admin/member/member/form",
"src": "resources/js/app/modules/admin/member/form.js",
"isEntry": true
},
"resources/js/app/modules/admin/member/index.js": {
"file": "js/app/modules/admin/member/member/index.mt8nT3RK.js",
"name": "js/app/modules/admin/member/member/index",
"src": "resources/js/app/modules/admin/member/index.js",
"isEntry": true
},
"resources/js/bootstrap.js": {
"file": "js/bootstrap.CEsE5a7F.js",
"name": "js/bootstrap",
"src": "resources/js/bootstrap.js",
"isEntry": true
},
"resources/js/config/core/dev/app.js": {
"file": "js/config/core/dev/app.l0sNRNKZ.js",
"name": "js/config/core/dev/app",
"src": "resources/js/config/core/dev/app.js",
"isEntry": true
},
"resources/js/layouts/smart.js": {
"file": "js/layouts/smart.BtPzgjTD.js",
"name": "js/layouts/smart",
"src": "resources/js/layouts/smart.js",
"isEntry": true
},
"resources/js/libraries/cs.js": {
"file": "js/libraries/cs.l0sNRNKZ.js",
"name": "js/libraries/cs",
"src": "resources/js/libraries/cs.js",
"isEntry": true
},
"resources/js/libraries/skin.js": {
"file": "js/libraries/skin.l0sNRNKZ.js",
"name": "js/libraries/skin",
"src": "resources/js/libraries/skin.js",
"isEntry": true
},
"resources/js/libraries/vertex.js": {
"file": "js/libraries/vertex.l0sNRNKZ.js",
"name": "js/libraries/vertex",
"src": "resources/js/libraries/vertex.js",
"isEntry": true
},
"resources/js/libraries/widget.js": {
"file": "js/libraries/widget.BzK2CPaz.js",
"name": "js/libraries/widget",
"src": "resources/js/libraries/widget.js",
"isEntry": true
},
"resources/js/sockets/bootstrap.js": {
"file": "js/sockets/bootstrap.ZJELHheL.js",
"name": "js/sockets/bootstrap",
"src": "resources/js/sockets/bootstrap.js",
"isEntry": true
},
"resources/js/vendor.js": {
"file": "js/vendor.COF9nXa8.js",
"name": "js/vendor",
"src": "resources/js/vendor.js",
"isEntry": true
}
}
I load my CSS and js files like the below,
@section('scripts')
@parent
@vite('resources/js/app/modules/admin/managing/listing/index.js')
@endsection
@section('styles')
@include('templates.layouts.style')
@vite('resources/css/app.css')
@vite('resources/css/app/layouts/portal.css')
@vite('resources/css/app/layouts/admin.css')
@show
Currently CSS files load properly from the public/build folder but JS files directly load from the resources folder. How can I fix this? I’m first time using vite in laravel, so don’t have much idea about this issue.