Vue-cli3專案處理包括（i18n/font-spider/xss/wangeditor）

eason,發表於2018-10-28
VueIDE

###專案開發階段構建太慢超過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/wangfupeng1988/wangEditor/issues/1749
    • xss處理
      • xss.js處理xss,生成白名單過濾所有非白名單標籤，會轉化成文字輸出入如<會轉化為&lt等；也可定製標籤中屬性，非對應屬性會清空，主要處理對應富文字
      • 無論請求亦或回顯渲染都需過濾
      • 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%"]
      }
    }
  }
複製程式碼

相關文章