Chore: (release) 1.2.17

.env

@@ -2,13 +2,13 @@
 # 注释只能在单独的一行里($需要转义: \$)
 
 APP_NAME=vue-tpl
-APP_VERSION=1.2.10
-# 发布地址(建议相对路径, 比如 '' './')
+# APP_VERSION: 自动从 package.json version 字段获取
+# 静态资源路径(开发环境的相对路径只支持'', 不支持./../等)
 BASE_URL=''
 # 接口地址(hash路由建议相对路径)
 BASE_PATH=api
 
-# 皮肤文件夹相对路径(其下的文件夹里只要没有index.scss就不会被识别为皮肤)
+# 皮肤文件夹相对别名的路径(其下的文件夹里只要没有index.scss就不会被识别为皮肤)
 SKIN_DIR=skin
 # 默认皮肤名 camelCase(多皮肤):SKIN_DIR/SKIN(/index)?.scss falsy(单皮肤):SKIN_DIR(/index)?.scss
 SKIN=light
@@ -24,4 +24,4 @@ SEARCH_FIELD=_target\d+
 #  [别名, 路径(相对根目录或入口), 默认指令(可省略)] 或者
 #  [别名, 路径, [允许的指令, ...], 默认指令(可省略)]
 #  ... ], 可使用cli命令指定指令(优先 --alias=foo.bar,bar.foo )
-_ALIAS=[["@iRoute", "index/route"]]
+_ALIAS=[["@iRoute", "index/route"], ["@oRoute", "other/route"]]

.env.development

@@ -3,11 +3,11 @@
 # import() => require(), 提高热更新速度, https://github.com/vuejs/vue-cli/blob/master/packages/@vue/babel-preset-app/index.js#L134
 VUE_CLI_BABEL_TRANSPILE_MODULES=true
 
-# 服务主机，默认0.0.0.0(可通过localhost和ip访问), 默认打开优先ip
-DEV_SERVER_HOST=0.0.0.0
+# 服务主机，默认0.0.0.0(优先ip)
+# DEV_SERVER_HOST=0.0.0.0
 # DEV_SERVER_NETWORK=IPv6
 # 服务端口，默认9000
-DEV_SERVER_PORT=9000
+# DEV_SERVER_PORT=9000
 # 默认打开页 默认/
 # DEV_SERVER_PAGE=/
 # 是否使用https (不支持http2) 默认false

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## v 1.2.17
+
+- 完善多SPA支持
+
 ## v 1.2.16
 
 - 文件/图片数据仓库, 下载任务增加禁用缓存选项

build/devServer.js

@@ -1,14 +1,8 @@
-/*
- * @Description: 开发服务器代理设置
- * @Author: 毛瑞
- * @Date: 2019-07-25 19:27:34
- */
-
 /** 获取开发服务器代理设置
- *
  * @param {Object} ENV 环境变量
+ * @param {String[]} PAGES SPA名字
  */
-module.exports = function(ENV) {
+module.exports = function(ENV, PAGES) {
   const PORT = 9000
   const HOST = '0.0.0.0'
   const TARGET = 'PROXY_TARGET'
@@ -79,6 +73,8 @@ module.exports = function(ENV) {
   }
 
   // http2 应该是不能配置了
+  const REG_SLASHES = /\/+/g
+  const REG_FILES = /\..+$/
   return {
     host,
     port,
@@ -87,5 +83,30 @@ module.exports = function(ENV) {
     clientLogLevel: 'warn',
     overlay: { errors: true }, // lint
     openPage: ENV.DEV_SERVER_PAGE || '',
+    historyApiFallback: {
+      rewrites: [
+        {
+          // SPA可省略.html 支持history路由(路径不能有'.', 因为用REG_FILES匹配文件)
+          // TODO: 精确匹配已有资源
+          from: /./,
+          to({ parsedUrl: { pathname, search } }) {
+            search || (search = '')
+            const paths = pathname.replace(ENV.BASE_URL, '').split('/')
+            paths[0] || paths.shift()
+            const entry = paths.shift()
+
+            return (
+              (PAGES.includes(entry)
+                ? `${ENV.BASE_URL}/${
+                  paths.length && REG_FILES.test(pathname)
+                    ? paths.join('/')
+                    : `${entry}.html`
+                }`.replace(REG_SLASHES, '/')
+                : pathname) + search
+            )
+          },
+        },
+      ],
+    },
   }
 }

build/pages.js

@@ -68,7 +68,7 @@ module.exports = function(isProd, entries) {
   const PAGRS_DIR = path.join(SRC_DIR, PAGRS_NAME) // 存放页面代码目录
   const templates = fs.readdirSync(PUB_DIR, { withFileTypes: true })
   const REG_DIR_FILE = /[\\/]\w+\.\w+$/
-  const REG_TEMPLATE = /\.html?$/
+  const REG_TEMPLATE = /\.html$/
   const pages = {}
 
   let isEmpty = true

build/production.config.js

@@ -127,15 +127,15 @@ module.exports = function(config, ENV, pages) {
     chunks: 'all', // 包含所有类型包（同步&异步 用insert-preload补齐依赖）
 
     // 分割优先级: maxInitialRequest/maxAsyncRequests < maxSize < minSize
-    minSize: 84992, // 最小分包大小
+    minSize: 103424, // 最小分包大小
     // webpack 5
     // minSize: {
-    //   javascript: 84992, // 83k
-    //   style: 134144, // 131k
+    //   javascript: 103424, // 101k
+    //   style: 166912, // 163k
     // },
-    maxSize: 320512, // 最大分包大小（超过后尝试分出大于minSize的包）
+    maxSize: 357376, // 最大分包大小（超过后尝试分出大于minSize的包）
     // maxSize: {
-    //   javascript: 320512, // 313k
+    //   javascript: 357376, // 349k
     //   style: 398336, // 389k
     // },
     // maxInitialSize: 216064, // 最大初始加载大小 211k

build/updateJSON.js

@@ -72,9 +72,10 @@ module.exports = function(fileName, key, value) {
   } else {
     // 同步读
     try {
-      json = JSON.parse(fs.readFileSync(fileName).toString())
+      json = fs.readFileSync(fileName).toString()
+      json = JSON.parse(json)
     } catch (error) {
-      return
+      return json
     }
   }
 
@@ -97,7 +98,7 @@ module.exports = function(fileName, key, value) {
     fs.writeFile(
       fileName,
       JSON.stringify(json, null, 2),
-      error => error && console.error(`写入${fileName}失败`, error)
+      (error) => error && console.error(`写入${fileName}失败`, error)
     )
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tpl",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "private": false,
   "description": "vue + vuex + vue router + TypeScript(支持 JavaScript) 模板",
   "author": "毛瑞 <[email protected]>",
@@ -26,10 +26,11 @@
     "pixi.js": "^5.2.4",
     "pixi.js-legacy": "^5.2.4",
     "register-service-worker": "^1.7.1",
+    "screenfull": "^5.0.2",
     "three": "^0.116.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.17.4",
+    "vue-i18n": "^8.17.6",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.1.6",
     "vuex": "^3.4.0",
@@ -43,10 +44,10 @@
     "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
     "@babel/plugin-proposal-function-sent": "^7.8.3",
     "@babel/plugin-proposal-private-methods": "^7.8.3",
-    "@types/crypto-js": "3.1.45",
+    "@types/crypto-js": "3.1.46",
     "@types/d3": "^5.7.2",
     "@types/echarts": "^4.6.0",
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^25.2.2",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "^4.3.1",
@@ -60,7 +61,7 @@
     "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.2",
+    "@vue/test-utils": "^1.0.3",
     "alternate-css-extract-plugin": "^0.9.4",
     "compression-webpack-plugin": "^4.0.0",
     "eslint": "^7.0.0",
@@ -78,7 +79,7 @@
     "regjsparser": "^0.6.4",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.4.0",
     "stylelint-config-scss-maorey": "^1.1.1",
     "stylelint-webpack-plugin": "^2.0.0",
     "typescript": "^3.9.2",

src/api/user.ts

@@ -6,6 +6,7 @@
 import { setHEAD, get, post } from '@/utils/ajax'
 import { local } from '@/utils/storage'
 import CONFIG from '@/config'
+import { STORAGE, AUTH } from '@/enums'
 
 // 加密算法(token + RSA 加密)
 import Jsencrypt from 'jsencrypt'
@@ -61,9 +62,9 @@ function login(formData: ILogin) {
     account,
     password,
   }).then(res => {
-    setHEAD(CONFIG.token, res.data.token, true)
+    setHEAD(AUTH.head, res.data.token, true)
     // 加密存token + 进入页面最先检查/设置token
-    local.set(CONFIG.token, res.data, CONFIG.tokenAlive)
+    local.set(STORAGE.me, res.data, CONFIG.tokenAlive)
     return res
   })
 }
@@ -74,8 +75,8 @@ function login(formData: ILogin) {
  */
 function logout() {
   return get(API.logout).then(res => {
-    setHEAD(CONFIG.token, '', true)
-    local.remove(CONFIG.token)
+    setHEAD(AUTH.head, '', true)
+    local.remove(STORAGE.me)
     return res
   })
 }

src/components/RouterViewTransparent.ts

@@ -15,7 +15,6 @@ import getKey from '@/utils/getKey'
 // const ModuleOne: any = getAsync(() =>
 //  import(/* webpackChunkName: "ihOne" */ './ModuleOne')
 // )
-const max = CONFIG.subPage > 1 ? CONFIG.subPage : 1
 
 /** 透明分发路由(支持嵌套)
  *    可以给个key防止<RVT>复用:
@@ -51,7 +50,12 @@ export default {
     const meta = (this.route || this.$route).meta
     return (this.n = h(
       'KeepAlive',
-      { props: { max, exclude: this.$router.$.e } },
+      {
+        props: {
+          exclude: this.$router.$.e,
+          max: CONFIG.subPage > 1 ? CONFIG.subPage : 1,
+        },
+      },
       [
         h(
           'RouterView',

src/components/hoc.ts

@@ -65,7 +65,7 @@ const Chooser: Component = {
   },
 }
 
-// 偶现一直在加载中的诡异状况, 原因未知
+// 偶现一直在加载中的诡异状况, 原因未知, key的问题?
 // function getAsync(
 //   promiseFactory: () => Promise<Component | AsyncComponent>,
 //   loading: Component = Loading,
@@ -113,10 +113,10 @@ const enum Status {
  *
  *      error: 加载失败展示的组件 默认:'com/Info'
  *
- *      delay: 展示loading延迟(ms) 默认:250
- *
  *      timeout: 加载组件超时时间 默认:'/config'.timeout
  *
+ *      delay: 展示loading延迟(ms) 默认:250
+ *
  *    }
  *
  * @returns {Component} 组件, error、loading、目标三个组件可触发事件'$'以重新加载
@@ -130,16 +130,15 @@ function getAsync(
     loading?: Component
     /** 加载失败展示的组件 默认:'@com/Info' */
     error?: Component
-    /** 展示loading延迟(ms) 默认:250 */
-    delay?: number
     /** 加载组件超时时间 默认:'@/config'.timeout */
     timeout?: number
+    /** 展示loading延迟(ms) */
+    delay?: number
   }
 ): Component {
   config || (config = {})
   config.loading || (config.loading = Loading)
   config.error || (config.error = Info)
-  config.delay || (config.delay = 250)
   config.timeout || (config.timeout = CONFIG.timeout)
 
   const store = Vue.observable({ s: Status.init })
@@ -174,10 +173,6 @@ function getAsync(
   return {
     functional: true,
     render(h, context) {
-      const data = context.data
-      ;(data.on || (data.on = {})).$ = onInit // event: $ 用于重新加载
-      key || (key = data.key || (data.key = getKey())) // 防缓存导致一直加载中
-
       if (keyDelay) {
         clearTimeout(keyDelay)
         keyDelay = 0
@@ -186,19 +181,25 @@ function getAsync(
         clearTimeout(keyTimeout)
         keyTimeout = 0
       }
+
+      const data = context.data
+      ;(data.on || (data.on = {})).$ = onInit // event: $ 用于重新加载
+      key || (key = data.key || (data.key = getKey())) // 防缓存导致一直加载中
+
       switch (store.s) {
         case Status.init:
           promiseFactory(context)
             .then(onDone)
             .catch(onFail)
-          keyTimeout = setTimeout(onTimeout, (config as any).timeout)
-          keyDelay = setTimeout(onLoad, (config as any).delay) // 默认延迟250ms显示loading
-          return h()
+          keyDelay = setTimeout(onLoad, (config as any).delay) // 延迟显示loading
+          ;(config as any).timeout > 0 &&
+            (keyTimeout = setTimeout(onTimeout, (config as any).timeout))
+          return h('i', { style: 'display:none', key: key + 'I' })
         case Status.load:
           data.key = key + 'L'
           return h((config as any).loading, data, context.children)
         case Status.fail:
-          data.key = key + 'R'
+          data.key = key + 'F'
           return h((config as any).error, data, context.children)
         default:
           data.key = key