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首屏渲染方案

    • https://juejin.im/post/5a9ca4...
    • https://ssr.vuejs.org/zh/

  • wangEditor坑

    • 換行獲取text純文本不帶空格,純文本內容沒法正常顯示
    • 有時候會出現spanyes標籤，致使filter過濾失敗後直接輸出，緣由爲word或wps複製粘貼將樣式和特定標籤帶過來
    • 處理時刪除有bug,解決方案已經提在https://github.com/wangfupeng...

  • xss處理

    • xss.js處理xss,生成白名單過濾全部非白名單標籤，會轉化成文本輸出入如<會轉化爲&lt等；也可定製標籤中屬性，非對應屬性會清空，主要處理對應富文本
    • 不管請求亦或回顯渲染都需過濾

    • CSP，項目被植入miner曠工的外置連接

      • 設置meta標籤以下能夠限制外部連接植入
      • <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'none'; style-src 'self' 'unsafe-inline';">

  • 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%"]
          }
        }
      }