平常填坑

1.vue項目打包上線後提示錯誤 Uncaught SyntaxError: Unexpected token <

開發環境

1. vue-cli3.0
2. router開啓了history模式
3. 打包採起了dll方式優化

問題解決

1. 當關閉history模式，從新打包發佈，顯示OK。可是瀏覽器路徑會加上#號，顯得不美觀，因此此方式不合適
2. 將dll方式打包引入移除，從新打包發佈，問題解決。可是違背了優化原則，因此此方法也不合適
3. 經過上面2個方法總結髮現打包後引入的dll.js文件的路徑是相對路徑，其餘引入的JS文件採起的是絕對路徑。將打包後引入dll文件的路徑修改爲絕對路徑。從新打包上傳，問題完全解決。

/**
             *   將 dll 注入到 生成的 html 模板中
             */
            config.plugins.push(
                new AddAssetHtmlPlugin({
                    // dll文件位置
                    filepath: path.resolve(__dirname, "./public/vendor/*.js"),
                    // dll 引用路徑
                    publicPath: "/vendor", (此處未修改以前是./)
                    // dll最終輸出的目錄
                    outputPath: "./vendor"
                })
            );
複製代碼

2.淺克隆

需求：在作後臺頂部導航切換時候，跳轉到子頁面的時候須要將子頁面打開一個新的標籤頁.

在建立新的標籤頁的時候，因爲某些功能會使用同一頁面，例如：新增、修改... 動手以前本身的想法是，跳轉到新增會添加一個標籤頁，跳轉到編輯又是一個標籤頁，每次進入以前會組件路由鉤子裏面將標籤的標題進行修改

/**
 * @description 驗證子頁面的展現權限
 */
export const handleChildrenAuth = (to, next, btnName) => {
  const { ownPermission, parentTitle, navList } = to.meta;

  try {
    const authInfo = JSON.parse(ownPermission);

    const res = authInfo.find(e => e.id === btnName);

    to.meta.title = parentTitle + "-" + res.text;

    console.log(to.meta.title);

    navList.push({
      name: res.text,
      url: to.path
    });

    next();
  } catch (error) {
    next("/");
  }
};

複製代碼

當建立標籤頁面的時候會監聽路由變化，將route直接存儲到展現的數據裏面

/**
   * @addTagList      添加標籤或者關閉一個標籤
   */
  addTagList(state, { route, type = "unshift" }) {
    let data = localRead("tagList");
    if (type === "push") {
      if (data) {
        const result = data.find(item => item.name === route.name);

        if (result && result.path === route.path) {
          return;
        }
        if (result) {
          const index = state.tagList.findIndex(e => e.name === route.name);

          state.tagList.splice(index, 1, route);
        } else {
          state.tagList.push(JSON.parse(JSON.stringify(route)));
        }
      }
    } else {
      const result = data.findIndex(item => item.name === route.name);
      if (result > -1) data.splice(result, 1);
      state.tagList = data;
    }
    localSave("tagList", state.tagList);
  },
複製代碼

直接將state.tagList.push（route）的話，此時就是一個淺克隆，當你新增的時候修改標籤標題的狀況下，會將編輯標籤的標題同時修改掉