引入 vite-plugin-env-parse

package.json

@@ -91,6 +91,7 @@
     "vite-plugin-archiver": "^0.1.1",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-env-parse": "^1.0.15",
     "vite-plugin-fake-server": "^2.2.0",
     "vite-plugin-pages": "^0.32.4",
     "vite-plugin-svg-icons": "^2.0.1",

src/App.vue

@@ -34,7 +34,7 @@ watch([
   deep: true,
 })
 
-const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
+const enableAppSetting = import.meta.env.VITE_APP_SETTING
 </script>
 
 <template>

src/api/index.ts

@@ -5,7 +5,7 @@ import axios from 'axios'
 import Message from 'vue-m-message'
 
 const api = axios.create({
-  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY) ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
   timeout: 1000 * 60,
   responseType: 'json',
 })

src/types/env.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  // Auto generate by env-parse
+  /**
+   * 应用配置面板
+   */
+  readonly VITE_APP_SETTING: boolean
+  /**
+   * 页面标题
+   */
+  readonly VITE_APP_TITLE: string
+  /**
+   * 接口请求地址，会设置到 axios 的 baseURL 参数上
+   */
+  readonly VITE_APP_API_BASEURL: string
+  /**
+   * 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+   */
+  readonly VITE_APP_DEBUG_TOOL: string
+  /**
+   * 是否开启代理
+   */
+  readonly VITE_OPEN_PROXY: boolean
+  /**
+   * 是否开启开发者工具
+   */
+  readonly VITE_OPEN_DEVTOOLS: boolean
+}

vite/plugins.ts

@@ -16,12 +16,13 @@ import { loadEnv } from 'vite'
 import Archiver from 'vite-plugin-archiver'
 import banner from 'vite-plugin-banner'
 import { compression } from 'vite-plugin-compression2'
+import { envParse, parseLoadedEnv } from 'vite-plugin-env-parse'
 import { vitePluginFakeServer } from 'vite-plugin-fake-server'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import VueDevTools from 'vite-plugin-vue-devtools'
 
 export default function createVitePlugins(mode: string, isBuild = false) {
-  const viteEnv = loadEnv(mode, process.cwd())
+  const viteEnv = parseLoadedEnv(loadEnv(mode, process.cwd()))
   const vitePlugins: (PluginOption | PluginOption[])[] = [
     VueRouter({
       routesFolder: './src/views',
@@ -38,7 +39,11 @@ export default function createVitePlugins(mode: string, isBuild = false) {
     }),
 
     // https://github.com/vuejs/devtools-next
-    viteEnv.VITE_OPEN_DEVTOOLS === 'true' && VueDevTools(),
+    viteEnv.VITE_OPEN_DEVTOOLS && VueDevTools(),
+
+    envParse({
+      dtsPath: 'src/types/env.d.ts',
+    }),
 
     // https://github.com/unplugin/unplugin-auto-import
     autoImport({
@@ -81,7 +86,7 @@ export default function createVitePlugins(mode: string, isBuild = false) {
       logger: !isBuild,
       include: 'src/mock',
       infixName: false,
-      enableProd: isBuild && viteEnv.VITE_BUILD_MOCK === 'true',
+      enableProd: isBuild && viteEnv.VITE_BUILD_MOCK,
     }),
 
     // https://github.com/nonzzz/vite-plugin-compression