feat: add testing env for vite

Author: kieranwv

.env

@@ -1,5 +1,5 @@
 # Base public path.
-VITE_APP_BASE_URL="/"
+VITE_BASE_PUBLIC_PATH="/"
 
 # Use gzip or brotli to compress resources.
 VITE_APP_GZIP="true"

.env.development

@@ -1,8 +1,8 @@
 # Base public path.
-VITE_APP_BASE_URL="/dev"
+VITE_BASE_PUBLIC_PATH="/dev"
 
 # Request url.
-VITE_PUBLIC_REQUEST_URL="/api"
+VITE_REQUEST_BASE_URL="/api"
 
 # Request url with proxy.
-VITE_PUBLIC_REQUEST_URL_PROXY="https://jsonplaceholder.typicode.com"
+VITE_REQUEST_BASE_URL_PROXY="https://jsonplaceholder.typicode.com"

.env.production

@@ -1,8 +1,8 @@
 # Base public path.
-VITE_APP_BASE_URL="/"
+VITE_BASE_PUBLIC_PATH="/"
 
 # Request url.
-VITE_PUBLIC_REQUEST_URL="https://jsonplaceholder.typicode.com"
+VITE_REQUEST_BASE_URL="/api"
 
 # Request url with proxy.
-VITE_PUBLIC_REQUEST_URL_PROXY=""
+VITE_REQUEST_BASE_URL_PROXY="https://jsonplaceholder.typicode.com"

.env.testing

@@ -0,0 +1,8 @@
+# Base public path.
+VITE_BASE_PUBLIC_PATH="/"
+
+# Request url.
+VITE_REQUEST_BASE_URL="/api"
+
+# Request url with proxy.
+VITE_REQUEST_BASE_URL_PROXY="https://jsonplaceholder.typicode.com"

package.json

@@ -14,6 +14,8 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "simple-git-hooks",
     "dev": "vite dev",
+    "dev:test": "vite dev --mode testing",
+    "build:test": "vite build --mode testing",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest",

src/composables/request.ts

@@ -18,7 +18,7 @@ export function useRequest(config?: AxiosRequestConfig, interceptors?: {
   responseError?: (error: AxiosError) => AxiosError
 }) {
   const request = axios.create(assign({
-    baseURL: import.meta.env.VITE_PUBLIC_REQUEST_URL,
+    baseURL: import.meta.env.VITE_REQUEST_BASE_URL,
     timeout: 1000 * 10,
     headers: {
       'Content-Type': ContentTypeEnum.JSON,

src/modules/vue-router.ts

@@ -4,7 +4,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { routes as autoRoutes, handleHotUpdate } from 'vue-router/auto-routes'
 
 export const router = createRouter({
-  history: createWebHistory(import.meta.env.VITE_APP_BASE_URL),
+  history: createWebHistory(import.meta.env.VITE_BASE_PUBLIC_PATH),
   routes: setupLayouts(autoRoutes),
 })
 

typings/env.d.ts

@@ -2,10 +2,10 @@
 /// <reference types="unplugin-vue-router/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_APP_BASE_URL: string
+  readonly VITE_BASE_PUBLIC_PATH: string
   readonly VITE_APP_GZIP: string
-  readonly VITE_PUBLIC_REQUEST_URL: string
-  readonly VITE_PUBLIC_REQUEST_URL_PROXY: string
+  readonly VITE_REQUEST_BASE_URL: string
+  readonly VITE_REQUEST_BASE_URL_PROXY: string
 }
 
 interface ImportMeta {

vite.config.ts

@@ -21,17 +21,17 @@ export default defineConfig(({ mode }) => {
   const chunks: string[] = ['axios', 'nprogress']
 
   return {
-    base: env.VITE_APP_BASE_URL,
+    base: env.VITE_BASE_PUBLIC_PATH,
     server: {
       host: true,
       port: 9865,
       // Proxy request and socket.
       // https://vitejs.dev/config/server-options.html#server-proxy
       proxy: {
-        [env.VITE_PUBLIC_REQUEST_URL]: {
-          target: env.VITE_PUBLIC_REQUEST_URL_PROXY,
+        [env.VITE_REQUEST_BASE_URL]: {
+          target: env.VITE_REQUEST_BASE_URL_PROXY,
           changeOrigin: true,
-          rewrite: (path: string) => path.replace(new RegExp(`^${env.VITE_PUBLIC_REQUEST_URL}`), ''),
+          rewrite: (path: string) => path.replace(new RegExp(`^${env.VITE_REQUEST_BASE_URL}`), ''),
         },
       },
     },