build: Add vite-plugin-html plugin

2022-02-19 15:57:41 +08:00 · 2022-02-19 15:57:41 +08:00 · d5b6e2a777
parent 7411dbc9fd
commit d5b6e2a777
13 changed files with 315 additions and 19 deletions
--- a/.env.base
+++ b/.env.base
@ -6,3 +6,6 @@ VITE_API_BASEPATH = base

 # 打包路径
 VITE_BASE_PATH = /
+
+# 标题
+VITE_APP_TITLE = ElementAdmin
--- a/.env.dev
+++ b/.env.dev
@ -18,3 +18,6 @@ VITE_SOURCEMAP = true

 # 输出路径
 VITE_OUT_DIR = dist-dev
+
+# 标题
+VITE_APP_TITLE = ElementAdmin
--- a/.env.pro
+++ b/.env.pro
@ -18,3 +18,6 @@ VITE_SOURCEMAP = false

 # 输出路径
 VITE_OUT_DIR = dist-pro
+
+# 标题
+VITE_APP_TITLE = ElementAdmin
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title><%= title %></title>
  </head>
  <body>
    <div id="app">
@ -128,7 +128,7 @@
        <div class="app-loading-wrap">
          <div class="app-loading-title">
            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
-            <div class="app-loading-title">element-plus-admin</div>
+            <div class="app-loading-title"><%= title %></div>
          </div>
          <div class="app-loading-item">
            <div class="app-loading-outter"></div>
--- a/package.json
+++ b/package.json
@ -91,6 +91,7 @@
    "unplugin-vue-define-options": "^0.3.1",
    "vite": "2.8.3",
    "vite-plugin-eslint": "^1.3.0",
+    "vite-plugin-html": "^3.0.6",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-style-import": "1.4.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -60,6 +60,7 @@ specifiers:
  unplugin-vue-define-options: ^0.3.1
  vite: 2.8.3
  vite-plugin-eslint: ^1.3.0
+  vite-plugin-html: ^3.0.6
  vite-plugin-mock: ^2.9.6
  vite-plugin-purge-icons: ^0.7.0
  vite-plugin-style-import: 1.4.1
@ -141,6 +142,7 @@ devDependencies:
  unplugin-vue-define-options: registry.npmmirror.com/unplugin-vue-define-options/0.3.1_vite@2.8.3+vue@3.2.31
  vite: registry.npmmirror.com/vite/2.8.3_less@4.1.2
  vite-plugin-eslint: registry.nlark.com/vite-plugin-eslint/1.3.0_vite@2.8.3
+  vite-plugin-html: registry.npmmirror.com/vite-plugin-html/3.0.6_vite@2.8.3
  vite-plugin-mock: registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.8.3
  vite-plugin-purge-icons: registry.nlark.com/vite-plugin-purge-icons/0.7.0_vite@2.8.3
  vite-plugin-style-import: registry.npmmirror.com/vite-plugin-style-import/1.4.1_vite@2.8.3
@ -4866,6 +4868,17 @@ packages:
    version: 4.0.7
    dev: false

+  registry.npmmirror.com/async/0.9.2:
+    resolution:
+      {
+        integrity: sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/async/-/async-0.9.2.tgz
+      }
+    name: async
+    version: 0.9.2
+    dev: true
+
  registry.npmmirror.com/atob/2.1.2:
    resolution:
      {
@ -5079,6 +5092,17 @@ packages:
      picocolors: registry.npmmirror.com/picocolors/1.0.0
    dev: true

+  registry.npmmirror.com/buffer-from/1.1.2:
+    resolution:
+      {
+        integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz
+      }
+    name: buffer-from
+    version: 1.1.2
+    dev: true
+
  registry.npmmirror.com/cac/6.7.12:
    resolution:
      {
@ -5369,6 +5393,20 @@ packages:
      static-extend: registry.npmmirror.com/static-extend/0.1.2
    dev: true

+  registry.npmmirror.com/clean-css/5.2.4:
+    resolution:
+      {
+        integrity: sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/clean-css/-/clean-css-5.2.4.tgz
+      }
+    name: clean-css
+    version: 5.2.4
+    engines: { node: '>= 10.0' }
+    dependencies:
+      source-map: registry.npmmirror.com/source-map/0.6.1
+    dev: true
+
  registry.npmmirror.com/clean-stack/2.2.0:
    resolution:
      {
@ -5550,6 +5588,17 @@ packages:
    version: 2.0.16
    dev: true

+  registry.npmmirror.com/commander/2.20.3:
+    resolution:
+      {
+        integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz
+      }
+    name: commander
+    version: 2.20.3
+    dev: true
+
  registry.npmmirror.com/commander/7.2.0:
    resolution:
      {
@ -5640,6 +5689,29 @@ packages:
    version: 1.0.17
    dev: false

+  registry.npmmirror.com/connect-history-api-fallback/1.6.0:
+    resolution:
+      {
+        integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz
+      }
+    name: connect-history-api-fallback
+    version: 1.6.0
+    engines: { node: '>=0.8' }
+    dev: true
+
+  registry.npmmirror.com/consola/2.15.3:
+    resolution:
+      {
+        integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/consola/-/consola-2.15.3.tgz
+      }
+    name: consola
+    version: 2.15.3
+    dev: true
+
  registry.npmmirror.com/constant-case/3.0.4:
    resolution:
      {
@ -6345,6 +6417,30 @@ packages:
      is-obj: registry.npmmirror.com/is-obj/2.0.0
    dev: true

+  registry.npmmirror.com/dotenv-expand/8.0.1:
+    resolution:
+      {
+        integrity: sha512-j/Ih7bIERDR5PzI89Zu8ayd3tXZ6E3dbY0ljQ9Db0K87qBO8zdLsi2dIvDHMWtjC3Yxb8XixOTHAtia0fDHRpg==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-8.0.1.tgz
+      }
+    name: dotenv-expand
+    version: 8.0.1
+    engines: { node: '>=12' }
+    dev: true
+
+  registry.npmmirror.com/dotenv/16.0.0:
+    resolution:
+      {
+        integrity: sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/dotenv/-/dotenv-16.0.0.tgz
+      }
+    name: dotenv
+    version: 16.0.0
+    engines: { node: '>=12' }
+    dev: true
+
  registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.0:
    resolution:
      {
@ -6375,6 +6471,21 @@ packages:
      zrender: registry.npmmirror.com/zrender/5.3.0
    dev: false

+  registry.npmmirror.com/ejs/3.1.6:
+    resolution:
+      {
+        integrity: sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/ejs/-/ejs-3.1.6.tgz
+      }
+    name: ejs
+    version: 3.1.6
+    engines: { node: '>=0.10.0' }
+    hasBin: true
+    dependencies:
+      jake: registry.npmmirror.com/jake/10.8.2
+    dev: true
+
  registry.npmmirror.com/electron-to-chromium/1.4.30:
    resolution:
      {
@ -7646,6 +7757,19 @@ packages:
      flat-cache: registry.npmmirror.com/flat-cache/3.0.4
    dev: true

+  registry.npmmirror.com/filelist/1.0.2:
+    resolution:
+      {
+        integrity: sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/filelist/-/filelist-1.0.2.tgz
+      }
+    name: filelist
+    version: 1.0.2
+    dependencies:
+      minimatch: registry.npmmirror.com/minimatch/3.0.4
+    dev: true
+
  registry.npmmirror.com/fill-range/4.0.0:
    resolution:
      {
@ -8408,6 +8532,29 @@ packages:
      lru-cache: registry.npmmirror.com/lru-cache/6.0.0
    dev: true

+  registry.npmmirror.com/html-minifier-terser/6.1.0:
+    resolution:
+      {
+        integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz
+      }
+    name: html-minifier-terser
+    version: 6.1.0
+    engines: { node: '>=12' }
+    hasBin: true
+    dependencies:
+      camel-case: registry.npmmirror.com/camel-case/4.1.2
+      clean-css: registry.npmmirror.com/clean-css/5.2.4
+      commander: registry.npmmirror.com/commander/8.3.0
+      he: registry.npmmirror.com/he/1.2.0
+      param-case: registry.npmmirror.com/param-case/3.0.4
+      relateurl: registry.npmmirror.com/relateurl/0.2.7
+      terser: registry.npmmirror.com/terser/5.10.0
+    transitivePeerDependencies:
+      - acorn
+    dev: true
+
  registry.npmmirror.com/html-tags/3.1.0:
    resolution:
      {
@ -9146,6 +9293,23 @@ packages:
    engines: { node: '>=0.10.0' }
    dev: true

+  registry.npmmirror.com/jake/10.8.2:
+    resolution:
+      {
+        integrity: sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/jake/-/jake-10.8.2.tgz
+      }
+    name: jake
+    version: 10.8.2
+    hasBin: true
+    dependencies:
+      async: registry.npmmirror.com/async/0.9.2
+      chalk: registry.npmmirror.com/chalk/2.4.2
+      filelist: registry.npmmirror.com/filelist/1.0.2
+      minimatch: registry.npmmirror.com/minimatch/3.0.4
+    dev: true
+
  registry.npmmirror.com/jiti/1.12.9:
    resolution:
      {
@ -10353,6 +10517,20 @@ packages:
    dependencies:
      whatwg-url: registry.npmmirror.com/whatwg-url/5.0.0

+  registry.npmmirror.com/node-html-parser/5.2.0:
+    resolution:
+      {
+        integrity: sha512-fmiwLfQu+J2A0zjwSEkztSHexAf5qq/WoiL/Hgo1K7JpfEP+OGWY5maG0kGaM+IFVdixF/1QbyXaQ3h4cGfeLw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/node-html-parser/-/node-html-parser-5.2.0.tgz
+      }
+    name: node-html-parser
+    version: 5.2.0
+    dependencies:
+      css-select: registry.npmmirror.com/css-select/4.2.1
+      he: registry.npmmirror.com/he/1.2.0
+    dev: true
+
  registry.npmmirror.com/node-releases/2.0.1:
    resolution:
      {
@ -11619,6 +11797,18 @@ packages:
    engines: { node: '>=8' }
    dev: true

+  registry.npmmirror.com/relateurl/0.2.7:
+    resolution:
+      {
+        integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz
+      }
+    name: relateurl
+    version: 0.2.7
+    engines: { node: '>= 0.10' }
+    dev: true
+
  registry.npmmirror.com/repeat-element/1.1.4:
    resolution:
      {
@ -12260,6 +12450,20 @@ packages:
      urix: registry.npmmirror.com/urix/0.1.0
    dev: true

+  registry.npmmirror.com/source-map-support/0.5.21:
+    resolution:
+      {
+        integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz
+      }
+    name: source-map-support
+    version: 0.5.21
+    dependencies:
+      buffer-from: registry.npmmirror.com/buffer-from/1.1.2
+      source-map: registry.npmmirror.com/source-map/0.6.1
+    dev: true
+
  registry.npmmirror.com/source-map-url/0.4.1:
    resolution:
      {
@ -12295,6 +12499,18 @@ packages:
    version: 0.6.1
    engines: { node: '>=0.10.0' }

+  registry.npmmirror.com/source-map/0.7.3:
+    resolution:
+      {
+        integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/source-map/-/source-map-0.7.3.tgz
+      }
+    name: source-map
+    version: 0.7.3
+    engines: { node: '>= 8' }
+    dev: true
+
  registry.npmmirror.com/sourcemap-codec/1.4.8:
    resolution:
      {
@ -12920,6 +13136,28 @@ packages:
      strip-ansi: registry.npmmirror.com/strip-ansi/6.0.1
    dev: true

+  registry.npmmirror.com/terser/5.10.0:
+    resolution:
+      {
+        integrity: sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/terser/-/terser-5.10.0.tgz
+      }
+    name: terser
+    version: 5.10.0
+    engines: { node: '>=10' }
+    hasBin: true
+    peerDependencies:
+      acorn: ^8.5.0
+    peerDependenciesMeta:
+      acorn:
+        optional: true
+    dependencies:
+      commander: registry.npmmirror.com/commander/2.20.3
+      source-map: registry.npmmirror.com/source-map/0.7.3
+      source-map-support: registry.npmmirror.com/source-map-support/0.5.21
+    dev: true
+
  registry.npmmirror.com/text-extensions/1.9.0:
    resolution:
      {
@ -13512,6 +13750,36 @@ packages:
    engines: { node: '>= 0.8' }
    dev: true

+  registry.npmmirror.com/vite-plugin-html/3.0.6_vite@2.8.3:
+    resolution:
+      {
+        integrity: sha512-B6ZAufvqUqdfPhcV+El8NNI3qV0d3ZntIur2UnP4tcHBV/O2d+6wHF79bJWuqR4WsvmsV7dejCNS3rAYFCisWw==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/vite-plugin-html/-/vite-plugin-html-3.0.6.tgz
+      }
+    id: registry.npmmirror.com/vite-plugin-html/3.0.6
+    name: vite-plugin-html
+    version: 3.0.6
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@rollup/pluginutils': registry.npmmirror.com/@rollup/pluginutils/4.1.2
+      colorette: registry.npmmirror.com/colorette/2.0.16
+      connect-history-api-fallback: registry.npmmirror.com/connect-history-api-fallback/1.6.0
+      consola: registry.npmmirror.com/consola/2.15.3
+      dotenv: registry.npmmirror.com/dotenv/16.0.0
+      dotenv-expand: registry.npmmirror.com/dotenv-expand/8.0.1
+      ejs: registry.npmmirror.com/ejs/3.1.6
+      fast-glob: registry.npmmirror.com/fast-glob/3.2.11
+      fs-extra: registry.npmmirror.com/fs-extra/10.0.0
+      html-minifier-terser: registry.npmmirror.com/html-minifier-terser/6.1.0
+      node-html-parser: registry.npmmirror.com/node-html-parser/5.2.0
+      pathe: registry.npmmirror.com/pathe/0.2.0
+      vite: registry.npmmirror.com/vite/2.8.3_less@4.1.2
+    transitivePeerDependencies:
+      - acorn
+    dev: true
+
  registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.8.3:
    resolution:
      {
--- a/src/config/app.ts
+++ b/src/config/app.ts
@ -48,7 +48,7 @@ export const appModules: AppState = {
  userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
  sizeMap: ['default', 'large', 'small'],
  mobile: false, // 是否是移动端
-  title: 'ElementAdmin', // 标题
+  title: import.meta.env.VITE_APP_TITLE as string, // 标题
  pageLoading: false, // 路由跳转loading

  breadcrumb: true, // 面包屑
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -33,6 +33,16 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
      title: t('router.login'),
      noTagsView: true
    }
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/Error/404.vue'),
+    name: 'NoFind',
+    meta: {
+      hidden: true,
+      title: '404',
+      noTagsView: true
+    }
  }
 ]

--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@ -60,18 +60,17 @@ export const usePermissionStore = defineStore({
        const routerMap: AppRouteRecordRaw[] = cloneDeep(asyncRouterMap)

        // 动态路由，404一定要放到最后面
-        this.addRouters = routerMap
-        // .concat([
-        //   {
-        //     path: '/:path(.*)*',
-        //     redirect: '/404',
-        //     name: '404',
-        //     meta: {
-        //       hidden: true,
-        //       breadcrumb: false
-        //     }
-        //   }
-        // ])
+        this.addRouters = routerMap.concat([
+          {
+            path: '/:path(.*)*',
+            redirect: '/404',
+            name: '404Page',
+            meta: {
+              hidden: true,
+              breadcrumb: false
+            }
+          }
+        ])
        // 渲染菜单的所有路由
        this.routers = cloneDeep(constantRouterMap).concat(routerMap)
        resolve()
--- a/src/views/Error/403.vue
+++ b/src/views/Error/403.vue
@ -13,5 +13,5 @@ const errorClick = () => {
 </script>

 <template>
-  <Error type="403" @errorClick="errorClick" />
+  <Error type="403" @error-click="errorClick" />
 </template>
--- a/src/views/Error/404.vue
+++ b/src/views/Error/404.vue
@ -13,5 +13,5 @@ const errorClick = () => {
 </script>

 <template>
-  <Error @errorClick="errorClick" />
+  <Error @error-click="errorClick" />
 </template>
--- a/src/views/Error/500.vue
+++ b/src/views/Error/500.vue
@ -13,5 +13,5 @@ const errorClick = () => {
 </script>

 <template>
-  <Error type="500" @errorClick="errorClick" />
+  <Error type="500" @error-click="errorClick" />
 </template>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -11,6 +11,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import { viteMockServe } from 'vite-plugin-mock'
 import DefineOptions from 'unplugin-vue-define-options/vite'
+import { createHtmlPlugin } from 'vite-plugin-html'

 // https://vitejs.dev/config/
 const root = process.cwd()
@ -70,7 +71,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
          setupProdMockServer()
          `
      }),
-      DefineOptions()
+      DefineOptions(),
+      createHtmlPlugin({
+        inject: {
+          data: {
+            title: env.VITE_APP_TITLE,
+            injectScript: `<script src="./inject.js"></script>`,
+          }
+        }
+      })
    ],

    css: {