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
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()
Check this link for Laravel Vite Docs
In blade template html head
Within the vite.config.js file
You should change the buildDirectory value to ‘./’
But then problem is index.php and .htaccess is removed because the public directory is cleaned.
use this code in
AppServiceProvider
onregister
method:With this code, the manifest.json problem is solved