skip to Main Content

I’m using vite to compile assets in laravel, everything is going well on the local development. But when I build the assets for production vite build and then I open the laravel in the browser abc.com then the website is automatically redirecting to abc.com/build. I don’t want this behaviour, I want to be located everything on the root domain. abc.com.
I tried different configuration, base configration in the vite.config.json but still not able to solve that.

Can you tell me how I can solve it? So the root link should not be redirected to /build.

Here is my vite.config.json.

// vite.config.js
import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
    ElementPlusResolver,
    HeadlessUiResolver
} from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        laravel(["src/main.ts"]),
        Icons({
            /* options */
        }),
        Components({
            dts: true,
            resolvers: [
                IconsResolver(),
                ElementPlusResolver(),
                HeadlessUiResolver({
                    prefix: "Tw"
                })
                // untitled-uiUiResolver({
                //     prefix: "x"
                // })
            ],
            dirs: [
                "./src/untitled-ui/components/**",
                "./src/components/**",
                "./src/layouts/**",
                "./src/forms/**",
                "./src/sections/**",
                "./src/popper/**"
            ]
        }),
        AutoImport({
            include: [
                /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                /.vue$/,
                /.vue?vue/, // .vue
                /.md$/ // .md
            ],
            imports: [
                "vue",
                "vue-router"
                // {
                //     "@/untitled-ui/utils/use-api": [
                //         "api",
                //         ["geoApi", "geo"],
                //         "apiGet",
                //         "apiPost",
                //         "apiPatch",
                //         "apiDelete"
                //     ]
                // }
            ],
            vueTemplate: false,
            dirs: [
                "./src/untitled-ui/components/**",
                "./src/untitled-ui/utils/**"
            ],
            dts: "./auto-imports.d.ts",
            eslintrc: {
                enabled: false, // Default `false`
                filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
                globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
            }
        })
        // laravel(["resources/css/app.css", "resources/js/app.js"])
    ],
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")
        }
    },
});

3

Answers


  1. I have just removed "import.meta.env.BASE_URL" which located in createWebHistory() of vue router setting and it works correctly.

    /resource/js/router/index.js: createWebHistory(import.meta.env.BASE_URL) => createWebHistory()

    Login or Signup to reply.
  2. Check this link for Laravel Vite Docs

    In blade template html head

    <head>
        {{
            Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
                ->useBuildDirectory('bundle') // Customize the build directory...
                ->useManifestFilename('assets.json') // Customize the manifest filename...
                ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
        }}
    </head>
    

    Within the vite.config.js file

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
     
    export default defineConfig({
        plugins: [
            laravel({
                hotFile: 'storage/vite.hot', // Customize the "hot" file...
                buildDirectory: 'bundle', // Customize the build directory...
                input: ['resources/js/app.js'], // Specify the entry points...
            }),
        ],
        build: {
          manifest: 'assets.json', // Customize the manifest filename...
        },
    });
    

    You should change the buildDirectory value to ‘./’
    But then problem is index.php and .htaccess is removed because the public directory is cleaned.

    Login or Signup to reply.
  3. use this code inAppServiceProvider on register method:

    
    $this->app->bind('path.public', function () {
        return base_path('public_html');
    });
    

    With this code, the manifest.json problem is solved

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search