基于umi使用ChatUI Pro(1)引入外部文件

1,302 阅读1分钟

1.引入外部js文件,在umi设置document.ejs没有生效,需要在umirc.ts配置文件中设置plungin,以插件的方式引入外部文件。

2.在根目录下创建plungin.js文件

export default (api, opts) => {
  // 引用第三方css
  api.addHTMLLinks(() => {
    return [
      {
        rel: 'stylesheet',
        type: 'text/css',
        href: '//g.alicdn.com/chatui/sdk-v2/0.2.4/sdk.css',
      },
    ];
  });
  // 引用第三方js
  api.addHTMLScripts(() => {
    return [
      {
        type: 'text/javascript',
        src: '//g.alicdn.com/chatui/sdk-v2/0.2.4/sdk.js',
      },
      {
        type: 'text/javascript',
        src: '//g.alicdn.com/chatui/extensions/0.0.7/isv-parser.js',
      },
      {
        type: 'text/javascript',
        src: '//g.alicdn.com/chatui/icons/0.3.0/index.js',
        async: true,
      },
    ];
  });
};

遇到的坑:

    2.1_在使用插件时,参考umi官网插件配置时,官网上的api是addHTMLScript,这里有错误,应该是addHTMLScripts,少个s。
    2.2_在查找插件的写法时,百度出来的方法返回的不是一个函数,需要以官网的写法。

3.在umirc.ts中配置插件

    export default defineConfig({
        plugins: ['./plungin.js']
    })

4.这样就引入成功了

image.png