Vue-cli3项目处理包括(i18n/font-spider/xss/wangeditor)

项目开发阶段构建太慢超过300秒,按需加载所有组件也需50秒,转为vue-cli3.0配置少量webpack即可达到10秒的构建速度效果,热重载2秒,可以接受

  • vue-cli2>>>>vue-cli3

    • 项目处理src直接移植到cli3项目
    • 处理pug语法;vue.config.js补充chainWebpack

        chainWebpack: config => {
          config.plugins.delete('prefetch');
          config.module
            .rule('pug')
            .test(/\.pug$/)
            .use('pug-plain-loader')
            .loader('pug-plain-loader')
            .end();
        },
  • todoList:已解决

    • 构建使用history模式去掉hash后必须在public中配置路径模式为绝对路径,nginx处理重定向
    • 苹方字体抽离

      • node 使用filesystem将项目中ascii码中文范围内文字抽取去重后得到对应1250个字体
      • 使用font-spider压缩pingfangsc得到270k ttf,woff,eot,svg
      • nginx配置mime.type 中ttf
      • gzip开启font/ttf等
    • vue首屏渲染方案

    • wangEditor坑

      • 换行获取text纯文本不带空格,纯文本内容无法正常显示
      • 有时候会出现spanyes标签,导致filter过滤失败后直接输出,原因为word或wps复制粘贴将样式和特定标签带过来
      • 处理时删除有bug,解决方案已经提在https://github.com/wangfupeng...
    • xss处理

      • xss.js处理xss,生成白名单过滤所有非白名单标签,会转化成文本输出入如<会转化为<等;也可定制标签中属性,非对应属性会清空,主要处理对应富文本
      • 无论请求亦或回显渲染都需过滤
      • CSP,项目被植入miner旷工的外置链接

        • 设置meta标签如下可以限制外部链接植入
    • i18n国际化处理

      • vue-i18n,vue-cli3可使用插件,vue add i18n,项目目录如下

          |-src
             |-lang
               |-en.json,zh.json
             |-page
               |-abc
                 |-lang.json
                 |-abc.vue
      • 在#app中$i18n.locale判断语境,新增最外层类名isEN以便对子元素中英切换时的处理

        • app(@click.stop="clickBlank" :class="{isEN:isEn}")

      • router处理,逻辑是在每次跳转先将from来源的参数存储入keysArr,包括lang属性,排序固定为?lang=en&a=123&b=456

          function nextWithLang() {
            let queryKeysArr = Object.keys(to.query);
            // 如果目标地址没有lang属性,我们需要从前一页取或者默认给一个zh
            if (!to.query.lang) {
              let nextPath;
              // 之前有设置过语言就采用
              if (from.query.lang) {
                nextPath = `${to.path}?lang=${from.query.lang}`;
                // 将所有属性拍平接在语言之后,如:/?lang=zh&id=123&name=qqq
                if (queryKeysArr.length > 0) {
                  queryKeysArr.forEach(key => {
                    if (key != 'lang') {
                      nextPath += `&${key}=${to.query[key]}`;
                    }
                  });
                }
              }
              // 没有设置过语言的话就给默认设置一个zh
              else {
                nextPath = `${to.path}?lang=zh`;
                // 将所有属性拍平接在语言之后,如:/?lang=zh&id=123&name=qqq
                if (queryKeysArr.length > 0) {
                  queryKeysArr.forEach(key => {
                    if (key != 'lang') {
                      nextPath += `&${key}=${to.query[key]}`;
                    }
                  });
                }
              }
        
              next(nextPath);
            } else {
              next();
            }
          }
    • dayjs处理时间戳

      • 处理与momeng.js相同
    • postcss.config.js处理低版本浏览器前缀

        module.exports = {
          plugins: {
            "autoprefixer": {
              browsers: ['ie >= 9', 'last 2 versions',"Firefox >= 30",">2%"]
            }
          }
        }

你可能感兴趣的:(wangeditor,font-spider,xss,vue.js)