升级vue-cli5前的准备工作

vue/full/package.json

@@ -8,31 +8,31 @@
     "svgo": "svgo -f src/asset/icon/svg --config=src/asset/icon/svgo.yml"
   },
   "dependencies": {
-    "axios": "^0.19.2",
-    "core-js": "^3.6.5",
-    "decimal.js": "^10.2.0",
+    "axios": "^0.21.1",
+    "decimal.js": "^10.2.1",
     "el-admin-layout": "0.0.2",
     "element-ui": "^2.14.1",
     "file-saver": "^2.0.5",
     "js-md5": "^0.7.3",
     "nprogress": "^0.2.0",
-    "pako": "^1.0.11",
-    "socket.io-client": "^2.3.0",
-    "vue": "^2.6.11",
+    "pako": "^2.0.2",
+    "socket.io-client": "2.3.1",
+    "vue": "^2.6.12",
     "vue-count-to": "^1.0.13",
-    "vue-router": "^3.3.4",
-    "vuex": "^3.4.0"
+    "vue-router": "^3.4.9",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.4.6",
-    "@vue/cli-service": "^4.4.6",
+    "@vue/cli-plugin-babel": "^4.5.9",
+    "@vue/cli-service": "^4.5.9",
     "body-parser": "^1.19.0",
-    "compression-webpack-plugin": "^5.0.2",
-    "sass": "^1.26.10",
-    "sass-loader": "^8.0.2",
-    "svg-sprite-loader": "^4.3.0",
+    "compression-webpack-plugin": "6.1.1",
+    "core-js": "^3.8.1",
+    "sass": "^1.32.0",
+    "sass-loader": "^10.1.0",
+    "svg-sprite-loader": "^5.2.1",
     "svgo": "^1.3.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "postcss": {
     "plugins": {

vue/full/src/store/module/resource.js

@@ -1,4 +1,3 @@
-import path from 'path'
 import {route as routeConfig} from '@/config'
 import {appMutations} from "el-admin-layout"
 import {addDynamicRoutes} from '@/router'
@@ -7,6 +6,7 @@ import {str2routeConfig, metaExtend} from "@/router/util"
 import {getAll} from "@/api/system/resource"
 import {isEmpty, deepClone} from "@/util"
 import {needAuth, auth} from "@/util/auth" //此处存在循环引用？
+import {resolvePath} from "@/util/path"
 import {createTree, shakeTree} from "@/util/tree"
 import {isExternal} from "@/util/validate"
 
@@ -135,7 +135,7 @@ function getAuthorizedMenus(menus) {
     function addFullPath(routes, basePath = '/') {
         routes.forEach(route => {
             //外链保持原样
-            route.fullPath = isExternal(route.path) ? route.path : path.resolve(basePath, route.path)
+            route.fullPath = isExternal(route.path) ? route.path : resolvePath(basePath, route.path)
             route.children && addFullPath(route.children, route.fullPath)
         })
     }
@@ -193,7 +193,7 @@ function generateResourceMap(resources) {
             parents.push(parent.path)
             parent = parent.parent
         }
-        return path.resolve(...parents.reverse())
+        return resolvePath(...parents.reverse())
     }
 
     //填充结果表

vue/full/src/util/path.js

@@ -0,0 +1,111 @@
+//copy from https://github.com/browserify/path-browserify/blob/master/index.js
+
+function normalizeStringPosix(path, allowAboveRoot) {
+    var res = ''
+    var lastSegmentLength = 0
+    var lastSlash = -1
+    var dots = 0
+    var code
+    for (var i = 0; i <= path.length; ++i) {
+        if (i < path.length)
+            code = path.charCodeAt(i)
+        else if (code === 47)
+            break
+        else
+            code = 47
+        if (code === 47) {
+            if (lastSlash === i - 1 || dots === 1) {
+
+            }
+            else if (lastSlash !== i - 1 && dots === 2) {
+                if (res.length < 2 || lastSegmentLength !== 2 || res.charCodeAt(res.length - 1) !== 46 /*.*/ || res.charCodeAt(res.length - 2) !== 46) {
+                    if (res.length > 2) {
+                        var lastSlashIndex = res.lastIndexOf('/')
+                        if (lastSlashIndex !== res.length - 1) {
+                            if (lastSlashIndex === -1) {
+                                res = ''
+                                lastSegmentLength = 0
+                            }
+                            else {
+                                res = res.slice(0, lastSlashIndex)
+                                lastSegmentLength = res.length - 1 - res.lastIndexOf('/')
+                            }
+                            lastSlash = i
+                            dots = 0
+                            continue
+                        }
+                    }
+                    else if (res.length === 2 || res.length === 1) {
+                        res = ''
+                        lastSegmentLength = 0
+                        lastSlash = i
+                        dots = 0
+                        continue
+                    }
+                }
+                if (allowAboveRoot) {
+                    if (res.length > 0)
+                        res += '/..'
+                    else
+                        res = '..'
+                    lastSegmentLength = 2
+                }
+            }
+            else {
+                if (res.length > 0)
+                    res += '/' + path.slice(lastSlash + 1, i)
+                else
+                    res = path.slice(lastSlash + 1, i)
+                lastSegmentLength = i - lastSlash - 1
+            }
+            lastSlash = i
+            dots = 0
+        }
+        else if (code === 46 && dots !== -1) {
+            ++dots
+        }
+        else {
+            dots = -1
+        }
+    }
+    return res
+}
+
+export function resolvePath() {
+    var resolvedPath = ''
+    var resolvedAbsolute = false
+    var cwd
+
+    for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
+        var path
+        if (i >= 0)
+            path = arguments[i]
+        else {
+            if (cwd === undefined)
+                cwd = process.cwd()
+            path = cwd
+        }
+
+        if (path.length === 0) {
+            continue
+        }
+
+        resolvedPath = path + '/' + resolvedPath
+        resolvedAbsolute = path.charCodeAt(0) === 47
+    }
+
+    resolvedPath = normalizeStringPosix(resolvedPath, !resolvedAbsolute)
+
+    if (resolvedAbsolute) {
+        if (resolvedPath.length > 0)
+            return '/' + resolvedPath
+        else
+            return '/'
+    }
+    else if (resolvedPath.length > 0) {
+        return resolvedPath
+    }
+    else {
+        return '.'
+    }
+}

vue/full/vue.config.js

@@ -49,28 +49,20 @@ module.exports = {
                 '@': resolve('src'),
                 '@ele': resolve('element-ui-personal')
             }
-        },
-        plugins: [
-            new CompressionWebpackPlugin({
-                filename: '[path].gz[query]',
-                algorithm: 'gzip',
-                test: new RegExp('\\.(js|css)$'),  //匹配文件名
-                threshold: 10 * 1024,               //对10K以上的数据进行压缩
-                minRatio: 0.8,
-                deleteOriginalAssets: false,        //是否删除源文件
-            })
-        ]
+        }
     },
     chainWebpack(config) {
         config.plugins.delete('preload')
         config.plugins.delete('prefetch')
 
         // set svg-sprite-loader
-        config.module
+        config
+            .module
             .rule('svg')
             .exclude.add(resolve('src/asset/icon'))
             .end()
-        config.module
+        config
+            .module
             .rule('icons')
             .test(/\.svg$/)
             .include.add(resolve('src/asset/icon'))
@@ -80,20 +72,31 @@ module.exports = {
             .options({symbolId: 'icon-[name]'})
             .end()
 
+        config.when(!settings.isDev, config => {
             //将css合并到一个文件中
             //https://github.com/vuejs/vue-cli/issues/2843
-        config.when(!settings.isDev, config => {
-            config.optimization.splitChunks({
+            config
+                .optimization
+                .removeEmptyChunks(true)
+                .splitChunks({
                     cacheGroups: {
-                    styles: {
-                        name: 'styles',
+                        style: {
+                            name: 'style',
+                            //type: 'css/mini-extract',
                             test: (m) => /css\/mini-extract/.test(m.type),
-                        chunks: 'all',
-                        minChunks: 1,
-                        enforce: true,
+                            chunks: 'all'
                         },
                     }
                 })
+
+            //生成gz
+            config
+                .plugin('compression-webpack-plugin')
+                .use(CompressionWebpackPlugin, [{
+                    test: new RegExp('\\.(js|css)$'),  //匹配文件名
+                    threshold: 10 * 1024,               //对10K以上的数据进行压缩
+                }])
+                .end()
         })
     }
 }