js 下载文件方式
window.open('/ocx_api/ocx控件.rar', '_self', '', false);
// 因为测试地址不同所以,测试环境下window.open('/beian/ocx_api/ocx控件.rar', '_self', '', false);
// const a = document.createElement('a');
// a.setAttribute('href', '../ocx_api/ocx.zip'); //a.href='文件链接'
// a.setAttribute('download', 'ocx控件'); //a.download='文件名'
// a.setAttribute('class', 'ocxDown');
// $("body").append(a);
// a.click();
// $('.ocxDown').remove();
a标签下载
<a href="/images/myw3schoolimage.jpg" download="w3logo">
vue根据不同环境运行以及打包方案
开发项目时,经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢?
为了更加方便消化本文章,建议先看下官方文档:
环境变量和模式
看完官方的文档如果还没有明白,可以参考本文。
在vue-cli 构建的项目中,默认有3种模式,如下图:
我个人的理解就是:
你执行npm run serve时,对应的环境就是开发环境;
你执行npm run build时,对应的环境就是生产环境。
如果你开发的项目中,不止该3种,该咋整呢?像在我开发的项目中,就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。
------------------进入主题------------------
1.创建不同环境变量文件
如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:
2.给.env文件添加内容
基本格式如下:
NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址
如我本地环境的配置就如下图所示:
我本地是用的easy-mock模拟的数据,所以配置的地址是mock接口地址。
3.在package.json中添加不同环境对应的执行语句
如官方文档所说,可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图:
请注意我配置文件中的 serve 与 build 。
4.使用
文件已创建好,配置语句也已写好。怎么用它呢?
首页你需要哪个环境,就执行哪个环境的命令语句。
比如我现在需要local环境,就执行 npm run local-serve 。如下图所示:
然后通过 process.env.NODE_ENV 获取环境名;通过 process.env.VUE_APP_URL 获取环境对应的url。
比如我们在axios请求中,就可以把它的baseURL设置为 process.env.VUE_APP_URL ,如下图所示:
后面的"/web"是根据我自己接口来的,你别也写个"/web"。
如果你不确定你自己现在是在哪个环境变量下,可以 console.log(“当前环境变量:”+process.env.NODE_ENV) 和 console.log(“当前环境路径:”+process.env.VUE_APP_URL) 看下。
像我的项目中就是下面这2个东东:
输出的内容就是.env.local文件里面配置的环境变量。
为了更好的理解,我们再执行一条语句, npm run serve ,看看此时的环境变量是哪个?
为什么呢?
因为 npm run serve 默认指向.env.developement,我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图:
总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!
扩展运算符与rest运算符的区别
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
当三个点(…)在等号左边,或者放在形参上。为 rest 运算符
当三个在等号右边,或者放在实参上,是 spread运算符
或者说:
放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符
前端 Vue打包文件后需要添加版本号Version,来防止更新后的页面有缓存
clip-path
clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的:
clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。