CODEWITHSUNDEEP
laravelvite
Asif Mushtaq
Asif Mushtaq

Reputation: 3798

Laravel + Vite. Production build redirecting to /build path in url

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")
        }
    },
});

Upvotes: 7

Views: 5069

Answers (3)

Mohammad Abdorrahmani
Mohammad Abdorrahmani

Reputation: 104

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

if using laravel 10 will be add this code in bootstrap/app.php:

$app = new Illuminate\Foundation\Application(
    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
);


$app->usePublicPath($app->basePath('../public_html'));

this work in laravel 10.

Upvotes: 0

aasiph
aasiph

Reputation: 257

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.

Upvotes: 1

James Chiu
James Chiu

Reputation: 91

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()

Upvotes: 9

Related Questions