vue：引入外部cdn报错 ‘XXX is not defined’ 及事件处理办法

原文：https://blog.csdn.net/skyblacktoday/article/details/89703976

框架：vue-cli（vue脚手架）

例：以cdn引入腾讯防水墙为例

前因：在html的head中引入外部cdn链接，

 

在vue文件中直接使用，如图

 

结果：如图报错

 

解决办法：

1. 在index.html中的head中引入，

2.在webpack.base.conf.js中配置

module.exports = {
externals: {
TencentCaptcha: 'TencentCaptcha'
},
....
}
3.在需要使用的vue文件中引入

import TencentCaptcha from 'TencentCaptcha';
使用

let t = new TencentCaptcha(this.$appid, (rsp) => {
console.log(rsp);
t.destroy();
if (rsp.ret === 0) {
...
} else {
}
}, {});
t.show();
关于腾讯防水墙的文档说明
————————————————
版权声明：本文为CSDN博主「Mosowe」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/skyblacktoday/article/details/89703976