vue3 接入网易易盾(webpack,vite)

webpack项目中配置:

方法一：

1) index.html
<script src="https://cstaticdun.126.net/load.min.js?t=123"></script>

2) vue.config.js:
configureWebpack:{
externals:{
initNECaptcha:'initNECaptcha'
}
}

3) 使用组件页：
import initNECaptcha from 'initNECaptcha'

初始化：
initNECaptcha({
captchaId: 'XXX',
element:'#captcha',
mode: 'popup',
width:'3rem',
onVerify:async (err,data)=>{ //注意onVerify层级，与onload，onerror不在同一层
if (err) return;
let res = await axios({
method: "post",
url: "/yidun/validate", //后端做校验的接口
headers:{
'x-ca-reqid':data.validate
}
});
if (!isOk(res, "网易易盾二次校验")) {
return ;
}
//下面写验证成功后要执行的方法

sendMsg()
}
},
function onload (instance) {
captchaIns = instance;
},
function onerror (err) {
// 初始化失败后触发该函数，err对象描述当前错误信息
console.log('onerror',err)
})

方法二：（不推荐）

1) index.html
<script src="https://cstaticdun.126.net/load.min.js?123"></script>

2）vue.config.js:

module.exports = {

...

lintOnSave: true //关闭语法每次保存时的语法检查，没其他方法解决时可以用来救急

...

}

vite中配置:

其他与在webpack中一直，除vite.config.ts中设置不同：

1）npm install vite-plugin-resolve-externals -d

2）vite.config.ts中引入：

import resolveExternalsPlugin from 'vite-plugin-resolve-externals'

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import styleImport, { VantResolve } from "vite-plugin-style-import";
import resolveExternalsPlugin from 'vite-plugin-resolve-externals'
const resolve = (dir: string): string => path.resolve(__dirname, dir);  //文件引入export default defineConfig({base: "/",plugins: [vue(),styleImport({resolves: [VantResolve()],}),resolveExternalsPlugin({initNECaptcha:'initNECaptcha'  //名字如果自己不确定，在控制台打印一下window对象，里面找找})],resolve: {alias: {"@": resolve("src"),...}...
})

关于页面中引入import initNECaptcha from 'initNECaptcha'时，eslint提示报错，可以在声明文件（.d.ts）中加入：declare module 'initNECaptcha';