feat(config): Support Setting Base Path in .env

* This uses loadEnv to load an environment file at configuration
  time.
  * Documentation:
    * https://vitejs.dev/config/#environment-variables
  * More on environment files:
    * https://vitejs.dev/guide/env-and-mode.html
  * `VIKUNJA_FRONTEND_BASE` is the variable in the environment
     file that will be used to set Vite’s base option.
* This adds a commented example to .env.local.example

Signed-off-by: Jef Oliver <jef@eljef.me>

.env.local.example

@@ -1,8 +1,13 @@
-# Duplicate this file and remove the '.example' suffix.
+# (1) Duplicate this file and remove the '.example' suffix.
-# Adjust the values as needed.
+# Naming this file '.env.local' is a Vite convention to prevent accidentally
+# submitting to git.
+# For more info see: https://vitejs.dev/guide/env-and-mode.html#env-files
 
-VITE_IS_ONLINE=true
+# (2) Comment in and adjust the values as needed.
-VITE_WORKBOX_DEBUG=false
+
-SENTRY_AUTH_TOKEN=YOUR_TOKEN
+# VITE_IS_ONLINE=true
-SENTRY_ORG=vikunja
+# VITE_WORKBOX_DEBUG=false
-SENTRY_PROJECT=frontend-oss
+# SENTRY_AUTH_TOKEN=YOUR_TOKEN
+# SENTRY_ORG=vikunja
+# SENTRY_PROJECT=frontend-oss
+# VIKUNJA_FRONTEND_BASE=/custom-subpath

vite.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import {defineConfig, type PluginOption} from 'vite'
+import {defineConfig, type PluginOption, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
 import {URL, fileURLToPath} from 'node:url'
@@ -49,8 +49,14 @@ function createFontMatcher(fontNames: string[]) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({mode}) => {
-	base: process.env.VIKUNJA_FRONTEND_BASE,
+	// Load env file based on `mode` in the current working directory.
+	// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+	// https://vitejs.dev/config/#environment-variables
+	const env = loadEnv(mode, process.cwd(), '')
+
+	return {
+		base: env.VIKUNJA_FRONTEND_BASE,
 		// https://vitest.dev/config/
 		test: {
 			environment: 'happy-dom',
@@ -181,4 +187,5 @@ export default defineConfig({
 				],
 			},
 		},
+	}
 })