Deploying Vue apps in subdirectory

#vue #htaccess #apache #deployment

This take 6 hours for me to understand,

first you need to configure some file
1. vite.config.js

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    base: "/yourSubdirectory/",
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

you need to add base configuration in your vite config, to make your asset file path relative to the root and the subdirectory.

2. index.js in router

    history: createWebHistory(`/subDirectory`),
    base: `/subDirectory`,

you need to add base configuration in the router so vue know where exactly your file, and the history to make vue save your subDirectory as a history route

3. .htaccess
this is the game begin

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subDirectory
RewriteRule ^subDirectory/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subDirectory/index.html [L]
</IfModule>

i cannot explain this section, so if you guys know please explain to me, i really appreciate it.

if you guys have same problem with me and have another method to resolve it, feel free to share.

thanks for reading.