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';