feat: 添加useGlobSetting

Author: toimc

.env

@@ -8,7 +8,7 @@ VITE_GLOB_APP_TITLE = VueToimcAdmin-基于Vue3+ElementPlus的中后台管理系
 VITE_GLOB_APP_SHORT_NAME = VueToimcAdmin
 
 # config file
-VITE_GLOB_CONFIG_FILE_NAME = "_app.config.js"
+VITE_APP_CONFIG_FILE_NAME = "_app.config.js"
 
 # dist path
 VITE_APP_OUTPUT_DIR=dist

.env.production

@@ -2,7 +2,7 @@
 VITE_USE_MOCK = true
 
 # public path
-VITE_PUBLIC_PATH =/vue3-toimc-admin
+VITE_PUBLIC_PATH =/vue3-toimc-admin/
 
 # Delete console
 VITE_DROP_CONSOLE = true

build/script/buildConf.ts

@@ -13,12 +13,12 @@ interface CreateConfigParams {
   configName: string
   config: any
   configFileName?: string
+  outputDir?: string
 }
 
 function createConfig(params: CreateConfigParams) {
-  const { configName, config, configFileName } = params
+  const { configName, config, configFileName, outputDir = 'dist' } = params
   try {
-    const { VITE_APP_OUTPUT_DIR } = config as ViteEnv
     const windowConf = `window.${configName}`
     // Ensure that the variable will not be modified
     const configStr = `${windowConf}=${JSON.stringify(config)};
@@ -28,22 +28,24 @@ function createConfig(params: CreateConfigParams) {
         writable: false,
       });
     `.replace(/\s/g, '')
-    fs.mkdirp(getRootPath(VITE_APP_OUTPUT_DIR))
-    writeFileSync(getRootPath(`${VITE_APP_OUTPUT_DIR}/${configFileName}`), configStr)
+    fs.mkdirp(getRootPath(outputDir))
+    writeFileSync(getRootPath(`${outputDir}/${configFileName}`), configStr)
 
     console.log(colors.cyan(`✨ [${pkg.name}]`) + ' - configuration file is build successfully:')
-    console.log(colors.gray(VITE_APP_OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n')
+    console.log(colors.gray(outputDir + '/' + colors.green(configFileName)) + '\n')
   } catch (error) {
     console.log(colors.red('configuration file configuration file failed to package:\n' + error))
   }
 }
 
 export function runBuildConfig() {
-  const config = getEnvConfig() as ViteEnv
+  const config = getEnvConfig()
+  const appConfig = getEnvConfig('VITE_APP_') as ViteEnv
   const configFileName = getConfigFileName(config)
   createConfig({
     config,
     configName: configFileName,
-    configFileName: config.VITE_GLOB_CONFIG_FILE_NAME
+    configFileName: appConfig.VITE_APP_CONFIG_FILE_NAME,
+    outputDir: appConfig.VITE_APP_OUTPUT_DIR
   })
 }

src/hooks/useGlobSetting.ts

@@ -0,0 +1,31 @@
+import type { GlobConfig } from 'types/config'
+
+import { warn } from '@/utils/log'
+import { getAppEnvConfig } from '@/utils/env'
+
+// 获取由esno形成的全局的配置文件_app.config.js中的配置
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL
+  } = getAppEnvConfig()
+
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      'VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.'
+    )
+  }
+
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_UPLOAD_URL
+  }
+  return glob as Readonly<GlobConfig>
+}

types/config.d.ts

@@ -1,5 +1,18 @@
 export type LocaleType = 'zh-CN' | 'en'
 
+export interface GlobConfig {
+  // Site title
+  title: string
+  // Service interface url
+  apiUrl: string
+  // Upload url
+  uploadUrl?: string
+  //  Service interface url prefix
+  urlPrefix?: string
+  // Project abbreviation
+  shortName: string
+}
+
 export interface LocaleSetting {
   locale: LocaleType
   // default language

types/global.d.ts

@@ -48,13 +48,15 @@ declare global {
     VITE_GLOB_APP_TITLE: string
     VITE_GLOB_APP_SHORT_NAME: string
     VITE_GLOB_CONFIG_FILE_NAME: string
+    VITE_GLOB_API_URL: string
     VITE_USE_CDN: boolean
     VITE_DROP_CONSOLE: boolean
     VITE_HTTPS: boolean
     VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'
     VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean
     VITE_USE_IMAGEMIN: boolean
     VITE_GENERATE_UI: string
+    VITE_APP_CONFIG_FILE_NAME: string
     VITE_APP_OUTPUT_DIR: string
   }
 

vite.config.ts

@@ -53,7 +53,7 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
     VITE_HTTPS,
     VITE_USE_MOCK,
     VITE_GLOB_APP_TITLE,
-    VITE_GLOB_CONFIG_FILE_NAME
+    VITE_APP_CONFIG_FILE_NAME
   } = viteEnv
 
   const isBuild = command === 'build'
@@ -62,7 +62,7 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
   const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`
 
   const getAppConfigSrc = () => {
-    return `${path || '/'}${VITE_GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`
+    return `${path || '/'}${VITE_APP_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`
   }
 
   return {
@@ -107,9 +107,9 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
         prodEnabled: VITE_USE_MOCK,
         // 相当于在src/main.ts中inject下面的代码，所以注意文件的路径问题
         injectCode: `
-    import { setupProdMockServer } from '../mock/_createProductionServer';
-    setupProdMockServer();
-  `
+          import { setupProdMockServer } from '../mock/_createProductionServer';
+          setupProdMockServer();
+        `
       }),
       createSvgIconsPlugin({
         // 指定需要缓存的图标文件夹
@@ -133,7 +133,7 @@ export default ({ mode, command }: ConfigEnv): UserConfig => {
           data: {
             title: VITE_GLOB_APP_TITLE
           },
-          // Embed the generated app.config.js file
+          // Embed the generated _app.config.js file, 使用esno编译，npm run build:post
           tags: isBuild
             ? [
                 {