平常填坑

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）的话，此时就是一个浅克隆，当你新增的时候修改标签标题的状况下，会将编辑标签的标题同时修改掉