新增ejs支持

CHANGELOG.md

@@ -6,11 +6,12 @@
 
 - 修复移动端登陆页显示问题
 - 改进了一些方法逻辑的问题
-- 新增加载动画
+- 修改移动端自适应配置方案(现在使用 postcss-px-to-viewport)，默认不启用
 
 ### Feats
 
-- 修改移动端自适应配置方案(现在使用 postcss-px-to-viewport)，默认不启用
+- 新增加载动画
+- 新增配置入口(cfg.ts)，现在可以直接配置首屏加载动画一些信息
 
 ## 3.1.5
 

cfg.ts

@@ -9,6 +9,12 @@ import {
 import type { AppConfigExport } from './src/types/cfg'
 
 const config: AppConfigExport = {
+  /** 配置首屏加载信息 */
+  preloadingConfig: {
+    title: 'Ray Template',
+    tagColor: '#ff6700',
+    titleColor: '#2d8cf0',
+  },
   /** 默认主题色 */
   primaryColor: '#2d8cf0',
   /**
@@ -64,7 +70,7 @@ const config: AppConfigExport = {
    *
    * 浏览器标题
    */
-  title: HTMLTitlePlugin('ray template'),
+  title: HTMLTitlePlugin('Ray Template'),
   /**
    *
    * 配置 HMR 特定选项（端口、主机、路径和协议）

index.html

@@ -7,6 +7,11 @@
     <title>Vite + Vue + TS</title>
   </head>
   <style>
+    :root {
+      --preloading-tag-color: <%= preloadingConfig.tagColor %>;
+      --preloading-title-color: <%= preloadingConfig.titleColor %>;
+    }
+
     #pre-loading-animation {
       position: fixed;
       left: 0;
@@ -14,7 +19,7 @@
       top: 0;
       bottom: 0;
       background-color: #ffffff;
-      color: #2d8cf0;
+      color: var(--preloading-title-color);
       text-align: center;
     }
 
@@ -46,7 +51,7 @@
 
       animation: rectangle infinite 1s ease-in-out -0.2s;
 
-      background-color: #ff6700;
+      background-color: var(--preloading-tag-color);
     }
 
     .pre-loading-animation__wrapper-loading:before,
@@ -55,7 +60,7 @@
       width: 6px;
       height: 10px;
       content: '';
-      background-color: #ff6700;
+      background-color: var(--preloading-tag-color);
     }
 
     .pre-loading-animation__wrapper-loading:before {
@@ -75,12 +80,12 @@
       80%,
       100% {
         height: 20px;
-        box-shadow: 0 0 #ff6700;
+        box-shadow: 0 0 var(--preloading-tag-color);
       }
 
       40% {
         height: 30px;
-        box-shadow: 0 -20px #ff6700;
+        box-shadow: 0 -20px var(--preloading-tag-color);
       }
     }
   </style>
@@ -88,7 +93,9 @@
     <div id="app"></div>
     <div id="pre-loading-animation">
       <div class="pre-loading-animation__wrapper">
-        <div class="pre-loading-animation__wrapper-title">Ray Template</div>
+        <div class="pre-loading-animation__wrapper-title">
+          <%= preloadingConfig.title %>
+        </div>
         <div class="pre-loading-animation__wrapper-loading"></div>
       </div>
     </div>

package.json

@@ -75,6 +75,7 @@
     "unplugin-vue-components": "^0.22.0",
     "vite": "^4.1.4",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-imp": "^2.3.1",
     "vite-plugin-inspect": "^0.6.0",

src/types/cfg.ts

@@ -25,6 +25,12 @@ export interface HTMLTitle {
   transformIndexHtml: (title: string) => string
 }
 
+export interface PreloadingConfig {
+  title?: string
+  tagColor?: string
+  titleColor?: string
+}
+
 export interface Config {
   server: ServerOptions
   buildOptions: (mode: string) => BuildOptions
@@ -35,10 +41,18 @@ export interface Config {
   mixinCSS?: string
   rootRoute?: RootRoute
   primaryColor?: string
+  preloadingConfig?: PreloadingConfig
 }
 
 export type Recordable<T = unknown> = Record<string, T>
 
+/**
+ *
+ * 全局注入配置
+ *
+ * 使用示例:
+ * const { layout } = __APP_CFG__
+ */
 export interface AppConfig {
   pkg: {
     name: string

vite.config.ts

@@ -16,6 +16,7 @@ import viteEslintPlugin from 'vite-plugin-eslint'
 import vitePluginImp from 'vite-plugin-imp' // 按需打包工具
 import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具
 import viteCompression from 'vite-plugin-compression' // 压缩打包
+import { ViteEjsPlugin } from 'vite-plugin-ejs'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
 
@@ -33,6 +34,7 @@ const {
   mixinCSS,
   rootRoute,
   primaryColor,
+  preloadingConfig,
 } = config
 
 /**
@@ -126,6 +128,9 @@ export default defineConfig(async ({ mode }) => {
         filename: 'visualizer.html',
         open: mode === 'report' ? true : false, // 以默认服务器代理打开文件
       }),
+      ViteEjsPlugin({
+        preloadingConfig,
+      }),
     ],
     optimizeDeps: {
       include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],