工作总结(12)

发表于 | 分类于 ，

这篇工作总结将整理一下几个工作中遇到的问题。

webpack插件CleanWebpackPlugin的排除配置

我们一般都知道webpack的CleanWebpackPlugin插件是用在打包时删除之前打包的文件，这样可以帮我们自动清理打包文件。我之所以配置CleanWebpackPlugin插件的排除配置是因为我希望打包完之后dist目录可以保留git仓库的信息，方便我在打包之后直接上传打包文件。但是如果没有做任何配置的话，这个插件是会直接删除整个目录下的文件的，所以需要配置。

（听说原来这个插件没有这个问题，我遇到这个问题是在3.0.0版本，所以不排除是版本的原因）

这个配置我自己找了很久，因为需要排除的不是某几个文件，而且.git目录，但是没有找到有人尝试排除目录，所以一开始只找到配置项cleanOnceBeforeBuildPatterns。这个配置项是配置打包之前删除文件，默认为['**/*']。只要在加上正则匹配非.git目录及目录内文件即可。

1
2
3
4
new CleanWebpackPlugin({
  // 必须加这两个目录匹配，前一个是匹配不是.git的目录，后一个是匹配不是.git目录下的文件
  cleanOnceBeforeBuildPatterns: ['**/*', '!\.git', '!\.git/**/*']
})

处理图片防盗链的方案

公司的项目有需要抓取文章的内容并需要把图片单独列出来提供使用，但是在这期间遇到一个问题是，因为图片是有防盗链处理的，所以当需要单独列出来的时候图片会报错无法显示。究其原因，是因为请求图片的时候请求的header会自动带上页面的相关信息，服务器就是通过对这部分的判断来选择是否返回图片数据。因此，最好的方案是在当前页面加上下面这个meta属性

1
<meta name="referrer" content="never">

这个mate属性能禁止header发送页面相关信息，可以绕过图片防盗链的检查。

不过这样做也是有缺点的，一是影响页面跳转，比如history.back()会找不到上一个页面，二是一些第三方的统计代码失效。

如果项目是单页面项目(如Vue构建的项目)只是某些页面有处理防盗链图片的话，建议最好是在进入页面时加上这个mate属性，再退出这个页面时再把这个属性置为default。

页面的部分涉及router-view的刷新

一般来说，我们在使用Vue开发项目的时候，一个页面一般会把一些功能模块拆分出来，变成一个个组件，这些组件是被解耦出来的，所以功能也比较独立。但是如果需要根据其中一个组件中数据的变化让另一个组件的数据也随之变化，就会出现一些问题，特别是如果一个组件的数据变化，在router-view中渲染的路由也要刷新。

我遇到的问题就是这种，router-view中渲染的路由需要根据其他组件数据的变化来刷新。

首先，考虑在父组件上通过this.$root.$on来增加一个监听，然后当子组件中数据变化需要让router-view中渲染的路由重新刷新，则可以调用this.$root.$emit来触发监听事件，还可以传入参数。这一步就完成子组件数据变化的监听。

因为需要刷新渲染的路由，所以可以考虑直接在router-view上使用v-if，v-if在切换真假值时，会直接卸载组件（所以这里不能使用v-show），然后当dom渲染完之后再将重新挂载组件，这样就相当于刷新了一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<router-view v-if="isRouterAlive"></router-view>

created() {
  console.log("allcontainer created")
  this.$root.$on('reload', this.reload);
},
methods: {
  reload () {
    this.isRouterAlive = false
    this.$nextTick(function() {
      this.isRouterAlive = true
      console.log('reload')
    })
  }
}

canvas渲染跨域图片的方案

这里有一个需求可能会经常需要做，就是分享的时候生成一张图片，而这张图片一般是通过页面的显示生成的。之前的工作总结中是有整理过的，可以用html2canvas来实现。但是这里有个问题，就是如果dom结构中如果有跨域的图片，则最后生成的图片将不会出现这些跨域的图片。所以这个问题需要处理。

我现在的处理方案是需要后端返回这张图的Blob对象，然后将这个Blob对象转换为本地地址，显示到页面上。转为本地地址的方案可以使用window上自带的方法window.URL.createObjectURL，这个方法传入一个Blob对象，返回一个url，这个url可以在页面上显示图片。这样就可以使跨域图片转为本地图片。

以上就是这次总结的内容。