修改配置文件增加压缩插件

package.json

@@ -17,10 +17,11 @@
     "@tinymce/tinymce-vue": "^3.2.8",
     "awe-dnd": "^0.3.4",
     "axios": "0.18.1",
-    "book-ui": "file:../GCLS-Book-question-ui/book-ui-0.1.12.tgz",
+    "book-ui": "file:../book-ui-0.1.12.tgz",
     "cnchar": "^3.0.1",
     "cnchar-all": "^3.0.1",
     "cnchar-order": "^3.0.1",
+    "compression-webpack-plugin": "^6.1.1",
     "core-js": "3.6.5",
     "element-ui": "^2.13.2",
     "he-tree-vue": "^2.0.10",

src/router/index.js

@@ -30,195 +30,195 @@ Vue.use(Router)
  * all roles can be accessed
  */
 export const constantRoutes = [{
-  path: '/404',
-  component: () =>
-    import('@/views/404'),
-  hidden: true
-},
-{
-  path: '/login',
-  component: () =>
-    import('@/views/login'),
-  hidden: true
-},
-{
-  path: '/EnterSys',
-  beforeEnter: (to, from, next) => {
-    let loadingInstance = Loading.service({
-      text: '跳转中...'
-    });
-    let config = getConfig();
-    if (config) {
-      let configObj = JSON.parse(config);
-      let path = handleSysType(configObj.sys_type, 'home');
-      if (path) {
-        loadingInstance.close();
-        if (configObj.sys_type == 'GCLS') {
-          next(path);
-        } else {
-          window.location.href = path
+        path: '/404',
+        component: () =>
+            import ('@/views/404'),
+        hidden: true
+    },
+    {
+        path: '/login',
+        component: () =>
+            import ('@/views/login'),
+        hidden: true
+    },
+    {
+        path: '/EnterSys',
+        beforeEnter: (to, from, next) => {
+            let loadingInstance = Loading.service({
+                text: '跳转中...'
+            });
+            let config = getConfig();
+            if (config) {
+                let configObj = JSON.parse(config);
+                let path = handleSysType(configObj.sys_type, 'home');
+                if (path) {
+                    loadingInstance.close();
+                    if (configObj.sys_type == 'GCLS') {
+                        next(path);
+                    } else {
+                        window.location.href = path
+                    }
+                } else {
+                    loadingInstance.close();
+                    Message({
+                        message: '此路径不存在',
+                        type: 'error',
+                        showClose: true,
+                        duration: 0
+                    })
+                }
+            }
         }
-      } else {
-        loadingInstance.close();
-        Message({
-          message: '此路径不存在',
-          type: 'error',
-          showClose: true,
-          duration: 0
-        })
-      }
-    }
-  }
-},
-// {
-//   path: '/',
-//   redirect: '/EnterSys',
-//   hidden: true
-// },
-{
-  path: '/input',
-  component: () =>
-    import('@/views/input'),
-  hidden: true
-},
-{
-  path: '/input2',
-  component: () =>
-    import('@/views/input2'),
-  hidden: true
-},
-{
-  path: '/input3',
-  component: () =>
-    import('@/views/input3'),
-  hidden: true
-},
-{
-  path: '/',
-  component: () =>
-    import('@/views/courseList'),
+    },
+    // {
+    //   path: '/',
+    //   redirect: '/EnterSys',
+    //   hidden: true
+    // },
+    {
+        path: '/input',
+        component: () =>
+            import ('@/views/input'),
+        hidden: true
+    },
+    {
+        path: '/input2',
+        component: () =>
+            import ('@/views/input2'),
+        hidden: true
+    },
+    {
+        path: '/input3',
+        component: () =>
+            import ('@/views/input3'),
+        hidden: true
+    },
+    {
+        path: '/',
+        component: () =>
+            import ('@/views/courseList'),
 
-},
-{
-  path: '/preview',
-  component: () =>
-    import('@/views/preview')
-},
-{
-  path: '/login',
-  component: () =>
-    import('@/views/login')
-},
-{
-  path: '/courseView',
-  component: () =>
-    import('@/views/courseView')
-},
-{
-  path: '/bookView',
-  component: () =>
-    import('@/views/bookView')
-},
-{
-  path: '/GoodsDetail',
-  beforeEnter: (to, from, next) => {
-    let loadingInstance = Loading.service({
-      text: '跳转中...'
-    });
-    let config = getConfig();
-    if (config) {
-      let configObj = JSON.parse(config);
-      let path = handleSysType(configObj.sys_type, 'goods');
-      if (path) {
-        loadingInstance.close();
-        if (configObj.sys_type == 'GCLS') {
-          next(path);
-        } else {
-          window.location.href = path
+    },
+    {
+        path: '/preview',
+        component: () =>
+            import ('@/views/preview')
+    },
+    {
+        path: '/login',
+        component: () =>
+            import ('@/views/login')
+    },
+    {
+        path: '/courseView',
+        component: () =>
+            import ('@/views/courseView')
+    },
+    {
+        path: '/bookView',
+        component: () =>
+            import ('@/views/bookView')
+    },
+    {
+        path: '/GoodsDetail',
+        beforeEnter: (to, from, next) => {
+            let loadingInstance = Loading.service({
+                text: '跳转中...'
+            });
+            let config = getConfig();
+            if (config) {
+                let configObj = JSON.parse(config);
+                let path = handleSysType(configObj.sys_type, 'goods');
+                if (path) {
+                    loadingInstance.close();
+                    if (configObj.sys_type == 'GCLS') {
+                        next(path);
+                    } else {
+                        window.location.href = path
+                    }
+                } else {
+                    loadingInstance.close();
+                    Message({
+                        message: '此路径不存在',
+                        type: 'error',
+                        showClose: true,
+                        duration: 0
+                    })
+                }
+            }
         }
-      } else {
-        loadingInstance.close();
-        Message({
-          message: '此路径不存在',
-          type: 'error',
-          showClose: true,
-          duration: 0
-        })
-      }
-    }
-  }
-},
-{
-  path: '/curGoodsDetail',
-  component: () =>
-    import('@/views/TextbookDetail')
-},
-{
-  path: '/discountCodeList',
-  component: () =>
-    import('@/views/discountCodeList')
-},
-{
-  path: '/adultInput',
-  component: () =>
-    import('@/views/adultInput')
-},
-{
-  path: '/adultInput2',
-  component: () =>
-    import('@/views/adultInput2')
-},
-{
-  path: "/BookBrowsing",
-  name: "BookBrowsing",
-  component: () =>
-    import('@/views/BookView2')
-},
-// 404 page must be placed at the end !!!
-{ path: '*', redirect: '/', hidden: true }
+    },
+    {
+        path: '/curGoodsDetail',
+        component: () =>
+            import ('@/views/TextbookDetail')
+    },
+    {
+        path: '/discountCodeList',
+        component: () =>
+            import ('@/views/discountCodeList')
+    },
+    {
+        path: '/adultInput',
+        component: () =>
+            import ('@/views/adultInput')
+    },
+    {
+        path: '/adultInput2',
+        component: () =>
+            import ('@/views/adultInput2')
+    },
+    {
+        path: "/BookBrowsing",
+        name: "BookBrowsing",
+        component: () =>
+            import ('@/views/BookView2')
+    },
+    // 404 page must be placed at the end !!!
+    { path: '*', redirect: '/', hidden: true }
 ]
 
 const createRouter = () =>
-  new Router({
-    // mode: 'history', // require service support
-    scrollBehavior: () => ({ y: 0 }),
-    routes: constantRoutes
-  })
+    new Router({
+        // mode: 'history', // require service support
+        scrollBehavior: () => ({ y: 0 }),
+        routes: constantRoutes
+    })
 
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+    const newRouter = createRouter()
+    router.matcher = newRouter.matcher // reset router
 }
 export function handleSysType(sys_type, path_type) {
-  let path = '';
-  let csArr = window.location.href.split('?');
-  let cs = csArr[1];
-  switch (sys_type) {
-    case 'GCLS':
-      console.log('全球汉语教学平台')
-      if (path_type == 'home') {
-        path = '/';
-      } else if (path_type == 'goods') {
+    let path = '';
+    let csArr = window.location.href.split('?');
+    let cs = csArr[1];
+    switch (sys_type) {
+        case 'GCLS':
+            console.log('全球汉语教学平台')
+            if (path_type == 'home') {
+                path = '/';
+            } else if (path_type == 'goods') {
 
-        path = '/curGoodsDetail?' + cs
-      }
-      break;
-    case 'AILP':
-      console.log('课后三点半')
-      if (path_type == 'home') {
-        path = '/GCLS-Book-AILP/#/EnterSys';
-      } else if (path_type == 'goods') {
-        path = '/GCLS-Book-AILP/#/GoodsDetail?' + cs;
-      }
-      break;
-    default:
-      path = '';
-      break;
-  }
-  return path;
+                path = '/curGoodsDetail?' + cs
+            }
+            break;
+        case 'AILP':
+            console.log('课后三点半')
+            if (path_type == 'home') {
+                path = '/GCLS-Book-AILP/#/EnterSys';
+            } else if (path_type == 'goods') {
+                path = '/GCLS-Book-AILP/#/GoodsDetail?' + cs;
+            }
+            break;
+        default:
+            path = '';
+            break;
+    }
+    return path;
 }
 
 export default router

src/views/canvas.vue

@@ -0,0 +1,108 @@
+<template>
+  <section>
+    <button @click="reload">开始重绘</button>
+    <button @click="reset">重置右侧画板</button>
+    <h1>测试画板</h1>
+    <canvas id="panel1" width="700px" height="500" style="border: 1px solid">
+    </canvas>
+    <canvas id="panel2" width="700px" height="500" style="border: 1px solid">
+    </canvas>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "redraw",
+  mounted() {
+    this.canvas = document.querySelector("#panel1");
+    this.redrawCanvas = document.querySelector("#panel1");
+    this.init();
+  },
+  methods: {
+    reload() {
+      this.reset();
+      this.redraw(this.redrawCxt);
+    },
+    init() {
+      this.canvas.onmousedown = (e) => {
+        this.isMouseDown = true;
+        this.lastLoc = this.window2Canvas(e.clientX, e.clientY);
+      };
+      this.canvas.onmouseout = (e) => {
+        this.isMouseDown = false;
+      };
+      this.canvas.onmousemove = (e) => {
+        if (this.isMouseDown) {
+          let curLoc = this.window2Canvas(e.clientX, e.clientY); // 获得当前坐标
+          this.draw(this.context, this.lastLoc, curLoc);
+          this.history.push([this.lastLoc, curLoc]);
+          this.lastLoc = Object.assign({}, curLoc); // U know what I mean.
+        }
+      };
+      this.canvas.onmouseup = (e) => {
+        this.isMouseDown = false;
+        if (history.length) {
+          localStorage.setItem("history", JSON.stringify(this.history));
+        }
+      };
+    },
+    window2Canvas(x, y) {
+      let bbox = this.canvas.getBoundingClientRect();
+      return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };
+    },
+    draw(context, lastLoc, curLoc) {
+      context.lineWidth = 5;
+      context.beginPath();
+      context.moveTo(lastLoc.x, lastLoc.y);
+      context.lineTo(curLoc.x, curLoc.y);
+      context.strokeStyle = "#000";
+      context.lineCap = "round";
+      context.lineJoin = "round";
+      context.stroke();
+    },
+    reset() {
+      this.redrawCxt.clearRect(
+        0,
+        0,
+        this.redrawCanvas.width,
+        this.redrawCanvas.height
+      );
+    },
+    redraw(context) {
+      if (localStorage.getItem("history")) {
+        let history = JSON.parse(localStorage.getItem("history"));
+        const len = history.length;
+        let i = 0;
+        const runner = () => {
+          i++;
+          if (i < len) {
+            this.draw(context, history[i][0], history[i][1]);
+            requestAnimationFrame(runner);
+          }
+        };
+        requestAnimationFrame(runner);
+      }
+    },
+  },
+  data() {
+    return {
+      canvas: null,
+      redrawCanvas: null,
+      isMouseDown: false,
+      lastLoc: { x: 0, y: 0 },
+      history: [],
+    };
+  },
+  computed: {
+    context() {
+      return this.canvas.getContext("2d");
+    },
+    redrawCxt() {
+      return this.redrawCanvas.getContext("2d");
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

vue.config.js

@@ -1,9 +1,10 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
+const CompressionPlugin = require('compression-webpack-plugin');
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+    return path.join(__dirname, dir)
 }
 
 
@@ -19,127 +20,134 @@ const webpack = require('webpack')
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
-  outputDir: 'dist',
-  assetsDir: 'static',
-  lintOnSave: false,
-  productionSourceMap: false,
-  devServer: {
-    port: port,
-    open: true,
-    overlay: {
-      warnings: false,
-      errors: true
+    /**
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then publicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     * Detail: https://cli.vuejs.org/config/#publicpath
+     */
+    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Book',
+    outputDir: 'dist',
+    assetsDir: 'static',
+    lintOnSave: false,
+    productionSourceMap: false,
+    devServer: {
+        port: port,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        proxy: {
+            // change xxx-api/login => mock/login
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                target: `http://gcls.utschool.cn/`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
+                }
+            }
+        },
+        after: require('./mock/mock-server.js')
     },
-    proxy: {
-      // change xxx-api/login => mock/login
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn/`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
+    configureWebpack: {
+        // provide the app's title in webpack's name field, so that
+        // it can be accessed in index.html to inject the correct title.
+        name: name,
+        resolve: {
+            alias: {
+                '@': resolve('src')
+            }
+        },
+        plugins: [
+            new webpack.ProvidePlugin({
+                jQuery: 'jquery',
+                $: 'jquery'
+            }),
+            new CompressionPlugin({
+                algorithm: 'gzip', // 使用gzip压缩
+                test: /\.js$|\.html$|\.css$/, // 匹配文件名
+                minRatio: 0.8, // 压缩率小于0.8才会压缩
+                threshold: 10240, // 对超过10k的数据压缩
+                deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
+            })
+        ]
     },
-    after: require('./mock/mock-server.js')
-  },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    },
-    plugins: [
-      new webpack.ProvidePlugin({
-        jQuery: 'jquery',
-        $: 'jquery'
-      })
-    ]
-  },
-  chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    config.plugin('preload').tap(() => [{
-      rel: 'preload',
-      // to ignore runtime.js
-      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-      include: 'initial'
-    }])
+    chainWebpack(config) {
+        // it can improve the speed of the first screen, it is recommended to turn on preload
+        config.plugin('preload').tap(() => [{
+            rel: 'preload',
+            // to ignore runtime.js
+            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+            include: 'initial'
+        }])
 
-    // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+        // when there are many pages, it will cause too many meaningless requests
+        config.plugins.delete('prefetch')
 
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
+        // set svg-sprite-loader
+        config.module
+            .rule('svg')
+            .exclude.add(resolve('src/icons'))
+            .end()
+        config.module
+            .rule('icons')
+            .test(/\.svg$/)
+            .include.add(resolve('src/icons'))
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({
+                symbolId: 'icon-[name]'
+            })
+            .end()
 
-    config.when(process.env.NODE_ENV !== 'development', config => {
-      config
-        .plugin('ScriptExtHtmlWebpackPlugin')
-        .after('html')
-        .use('script-ext-html-webpack-plugin', [{
-          // `runtime` must same as runtimeChunk name. default is `runtime`
-          inline: /runtime\..*\.js$/
-        }])
-        .end()
-      config.optimization.splitChunks({
-        chunks: 'all',
-        cacheGroups: {
-          libs: {
-            name: 'chunk-libs',
-            test: /[\\/]node_modules[\\/]/,
-            priority: 10,
-            chunks: 'initial' // only package third parties that are initially dependent
-          },
-          elementUI: {
-            name: 'chunk-elementUI', // split elementUI into a single package
-            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-          },
-          commons: {
-            name: 'chunk-commons',
-            test: resolve('src/components'), // can customize your rules
-            minChunks: 3, //  minimum common number
-            priority: 5,
-            reuseExistingChunk: true
-          }
-        }
-      })
-      config.module
-        .rule('images')
-        .use('image-webpack-loader')
-        .loader('image-webpack-loader')
-        .options({
-          bypassOnDebug: true
-        })
-        .end()
+        config.when(process.env.NODE_ENV !== 'development', config => {
+            config
+                .plugin('ScriptExtHtmlWebpackPlugin')
+                .after('html')
+                .use('script-ext-html-webpack-plugin', [{
+                    // `runtime` must same as runtimeChunk name. default is `runtime`
+                    inline: /runtime\..*\.js$/
+                }])
+                .end()
+            config.optimization.splitChunks({
+                chunks: 'all',
+                cacheGroups: {
+                    libs: {
+                        name: 'chunk-libs',
+                        test: /[\\/]node_modules[\\/]/,
+                        priority: 10,
+                        chunks: 'initial' // only package third parties that are initially dependent
+                    },
+                    elementUI: {
+                        name: 'chunk-elementUI', // split elementUI into a single package
+                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                    },
+                    commons: {
+                        name: 'chunk-commons',
+                        test: resolve('src/components'), // can customize your rules
+                        minChunks: 3, //  minimum common number
+                        priority: 5,
+                        reuseExistingChunk: true
+                    }
+                }
+            })
+            config.module
+                .rule('images')
+                .use('image-webpack-loader')
+                .loader('image-webpack-loader')
+                .options({
+                    bypassOnDebug: true
+                })
+                .end()
 
-      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-      config.optimization.runtimeChunk('single')
-    })
-  }
+            // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+            config.optimization.runtimeChunk('single')
+        })
+    }
 }