因为项目需要用到生成海报的功能,所以立马想到了html2canvas的插件。但是很久没用了,有点忘记。
第一时间选择了npm i html2canvas
看着熟悉的安装界面,一切都向美好的方向发展。
但是当我按照文档

import html2canvas from 'html2canvas' 
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

项目使用了过后,发现报错了!
Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGGElement>'
错误原因好像是说这个对象是只读属性,无法克隆。一直也没发现问题在哪!
百度了很多次都没搜到相关问题。
后来我上了官方的github找到了相关issues
https://github.com/niklasvh/html2canvas/issues/1868
浏览了一下,发现问题出现在rc版本之后
以前的1.0.0-alpha.12版本可以用。
果断放弃新版本
npm i html2canvas@1.0.0-alpha.12
安装以后,使用正常了

我们在打包VUE项目的时候通常会使用npm run build命令。但是我们经常要打包测试环境与生产环境,然而在打不同环境的包时候,某些配置项是不同的。我们每次通过手动来修改的话会非常繁琐。如果需要手动修改的地方过多的话,难免会有遗漏。
目前我参与开发的项目就有3种不同的环境需要处理

  1. 本地开发环境npm run dev
  2. 服务器测试环境npm run build:stage
  3. 生产环境npm run build:prod
    可以看到,除了本地开发环境用的是dev本地预览,其他两个打包命令都加上了后缀。我们就是通过后缀的命令来区分不同的打包环境。

这里我使用vue-cli3的脚手架环境进行演示。
首先vue里面配置node.js全局变量的文件是单独的一个.env文件。这里我们创建三种不同环境的.env文件。

.env.development      // 开发环境
.env.production       // 生产环境
.env.testproduction   // 测试环境

文件创建好了放到vue项目的根目录即可(一定要注意文件名前面是有“.”的)。
创建好了文件,我们在文件里面写上配置。这里以Axios的不同环境调用的接口做演示,其他部分举一反三

# 标记
NODE_ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://foo.foo.com'

这里解释一下。
NODE_ENV这个是用来标记当前的环境是什么,等会儿会在vue里面用到
下面的VUE_APP_BASE_API定义了一个接口的常量,等会儿也会用到。
根据不同的环境写好配置文件以后,我们找到项目的package.json配置
在scripts里可以看到build配置。
我们把配置改为我们写好的三个

"dev": "vue-cli-service serve --mode development",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode testproduction",

这里主要是注意后面增加了--mode xxxxx这些参数
这个参数的作用是node根据我们刚刚创建的.env文件去编译里面的变量,让我们系统可以用。xxxxx是.env.后面的名称

准备好这些以后,我们在VUE里面就可以使用process.env.NODE_ENV来判断当前的环境了。
我在封装的axios里面,增加了一个switch判断,根据process.env.NODE_ENV判断当前的环境
然后把api定义为VUE_APP_BASE_API即可。这样我们可以通过命令去打包不同的环境,而且每次打包也不用重新去更改接口了。
其他配置基本是一致的,都是通过判断不同的环境获取到不同的配置而已

十一年春,齐为鄎故,国书、高无丕帅师伐我,及清。季孙谓其宰冉求曰:「齐师在清,必鲁故也。若之何?」求曰:「一子守,二子从公御诸竟。」季孙曰:「不能。」求曰:「居封疆之间。」季孙告二子,二子不可。求曰:「若不可,则君无出。一子帅师,背城而战。不属者,非鲁人也。鲁之群室,众于齐之兵车。一室敌车,优矣。子何患焉?二子之不欲战也宜,政在季氏。当子之身,齐人伐鲁而不能战,子之耻也。大不列于诸侯矣。」季孙使从于朝,俟于党氏之沟。武叔呼而问战焉,对曰:「君子有远虑,小人何知?」懿子强问之,对曰:「小人虑材而言,量力而共者也。」武叔曰:「是谓我不成丈夫也。」退而蒐乘,孟孺子泄帅右师,颜羽御,邴泄为右。冉求帅左师,管周父御,樊迟为右。季孙曰:「须也弱。」有子曰:「就用命焉。」季氏之甲七千,冉有以武城人三百为己徒卒。老幼守宫,次于雩门之外。五日,右师从之。公叔务人见保者而泣,曰:「事充政重,上不能谋,士不能死,何以治民?吾既言之矣,敢不勉乎!」

- 阅读剩余部分 -

今天在新电脑拉git分支的时候发现,项目死活也跑不起来。后来发现以前改了文件名的大小写,但是git默认是对文件名的大小写不敏感的,所以更改文件名的所有文件都没有提交到git上面。
通过命令

git config core.ignorecase false

把默认的忽略大小写关闭,然后提交代码,搞定!