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

Mosowe

已于 2022-05-28 09:14:45 修改

阅读量2.7w

点赞数 4

分类专栏： vue 文章标签： vue脚手架cdn引入

于 2019-04-30 10:11:10 首次发布

本文链接：https://blog.csdn.net/skyblacktoday/article/details/89703976

版权

vue 专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍如何在Vue项目中正确引入并使用腾讯防水墙，包括通过CDN引入、配置webpack以及在具体Vue组件中调用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

结果：如图报错

解决办法：

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

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

module.exports = {
  externals: {
    TencentCaptcha: 'TencentCaptcha'
  },
....
}

vue-cli3版本中在 vue.config.js 文件中配置 externals

module.exports = {
  devServer: {
    port: 3200// 端口号配置
  },
  configureWebpack: {
    externals: {
      TencentCaptcha: 'TencentCaptcha'
    }
  }
}

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

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();

关于腾讯防水墙的文档说明