dam28800's avatar

Configuration Vite for production

Hello,

I migrated from webpack to vite js. I migrated following this process : https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite

In my development environment (sail) everything works correctly.

My vite.config.js file looks like this :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';

export default defineConfig({
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
    plugins: [
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
        vue({ 
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

When in production I execute "npm run build" it works but when I try to display my site i have an error :

Unable to locate file in Vite manifest

In my layout i have :

@vite(['public/css/icons.min.css', 'public/css/app-modern.min.css', 'public/css/custom.css', 'public/css/highlight.css'])

Should I change the url in my vite.config.js file to the public IP address of my production server ?

Is there another configuration done for production? Open a port or something else ?

In my public folder I deleted the hot file but same result. Same by deleting the cache

thank you in advance for your help

0 likes
2 replies
gych's avatar
gych
Best Answer
Level 29

Try to update vite config for laravel plugin to this:

    plugins: [
        laravel({
			 input: ['resources/js/app.js', 'resources/sass/app.scss'],
        }),

And add this to your layout

@vite(['resources/js/app.js', 'resources/sass/app.scss', 'public/css/icons.min.css', 'public/css/app-modern.min.css', 'public/css/custom.css', 'public/css/highlight.css'])
dam28800's avatar

Thank you very much, it works

1 like

Please or to participate in this conversation.