矿泉水丶 2025-01-15 02:11 采纳率: 50%
浏览 70

CDN如何引入@ant-design/icons-vue图标

因为项目无法使用npm构建项目,只能使用script标签的方式引入ant design vue,最近想用一下ant design vue的图标发现需要单独引入一个@ant-design/icons-vue。但github上找到一个示例,我模仿这写了一下,收获一个报错,想问问有没有人能帮忙解答一下,谢谢。

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script type="text/javascript" src="../static/C_IMPORT_ANTDV.js"></script>
  <script type="importmap">
    {
      "imports": {
        "@ant-design/icons-vue": "https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@7.0.1/+esm"
      }
    }
  </script>
</head>

<body>

  <body style="display: flex; justify-content: center;">
    <!-- 页面布局 Bgn -->
    <div id='app' style="width: 1190px; padding-top: 8px;">
      <a-config-provider :locale="locale">
        <down-outlined />
      </a-config-provider>
    </div>

    <script type="module">
      import { DownOutlined } from "@ant-design/icons-vue";
      const { createApp } = Vue;

      dayjs.locale('zh-cn');
      const locale = antd.locales.zh_CN;

      createApp({
        components: {
          DownOutlined,
        },
        setup() {
          return {
            locale,
          }
        }
      }).use(antd).mount("#app");
    </script>

  </body>
</body>

</html>

这是C_IMPORT_ANTDV.js中的代码

/* 引入各项依赖 */

//Vue v3.4.15
document.write('<script type="text/javascript" src="../static/vue.global_3.4.15.js"></script>');

//dayjs v1.11.10
document.write('<script type="text/javascript" src="../static/dayJs/dayjs.min.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/customParseFormat.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekday.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/localeData.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekOfYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/advancedFormat.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/quarterOfYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/zh-cn.js"></script>');

//antdv v4.1.2
document.write('<script type="text/javascript" src="../static/AntdVue/antd.min_4.1.2.js"></script>');
document.write('<script type="text/javascript" src="../static/AntdVue/antd-with-locales.min.js"></script>');
document.write('<link rel="stylesheet" href="../static/AntdVue/reset_4.1.2.css" />');

//axios v1.0.0
document.write('<script type="text/javascript" src="../static/axios/axios.min.js"></script>');

img

展开全部

  • 写回答

3条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2025-01-15 02:12
    关注
    让【道友老李】来帮你解答,本回答参考gpt编写,并整理提供,如果还有疑问可以点击头像关注私信或评论(小黑屋了,无法评论,请私信)。
    如果答案让您满意,请采纳、关注,非常感谢!
    解决这个问题的关键在于正确引入和注册`@ant-design/icons-vue`的图标组件。根据你提供的代码,你需要在`<script type="module"></script> <script type="importmap"></script> <body>
    <script type="module"></script> </body>
    请注意,上述示例中的代码仅供参考,可能需要根据实际情况做出调整。另外,确保在项目中正确引入Vue及相关依赖,以及正确配置`@ant-design/icons-vue`的图标组件路径。希望这能帮助你解决问题。
    评论
  • 关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    根据你提供的代码和错误信息,看起来问题可能出在引入 @ant-design/icons-vue 的方式上。在使用 import map 引入时,你需要在脚本标签中使用特定的方式来导入模块。在 CDN 上使用 @ant-design/icons-vue 时,你需要确保正确地引入模块和样式。以下是一些可能的解决方案:

    方案一:使用 script 标签直接引入

    你可以尝试直接使用 script 标签来引入 @ant-design/icons-vue 和其样式文件,而不是使用 import map。例如:

    <!-- 引入 Vue 和其他依赖 -->
    <script src="../static/vue.global_3.4.15.js"></script>
    <!-- ...其他脚本... -->
    
    <!-- 引入 Ant Design Vue -->
    <script src="../static/AntdVue/antd.min_4.1.2.js"></script>
    <!-- 引入 Ant Design Vue 的样式 -->
    <link rel="stylesheet" href="../static/AntdVue/antd.css">
    
    <!-- 引入 Ant Design Icons Vue -->
    <script src="https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@latest"></script>
    

    确保加载顺序正确,并且确保你的项目中包含了所需的样式文件。注意 @latest 会自动加载最新的版本,你可能需要替换为特定的版本号(如 @7.0.1)。此外,请确保你的项目中的其他依赖项也已正确加载。

    方案二:检查 import map 的语法和路径

    如果你坚持使用 import map 来引入模块,请确保语法和路径正确。你的 import map 语法看起来是正确的,但路径可能需要调整。确保路径指向正确的 CDN 地址。同时,注意版本号的使用,避免冲突或不兼容问题。你可能需要检查 CDN 上的模块版本是否与你期望使用的版本一致。

    方案三:检查 Vue 版本兼容性

    此外,确认你的 Vue 版本与 Ant Design Vue 的版本是否兼容。在某些情况下,库的新版本可能与旧版本的 Vue 不完全兼容。检查 Ant Design Vue 的文档,确保你使用的版本与你的 Vue 版本兼容。

    方案四:检查错误堆栈和源代码映射

    查看错误堆栈(图1和图2)可以帮助定位问题所在。尝试检查 AntdIcon.js 的第 47 行和其他相关的源代码,看看是否有明显的错误或未定义的变量。使用浏览器的开发者工具可以帮助调试和定位问题。

    综合以上方案,尝试逐一排查问题所在。如果问题仍然存在,建议查看 Ant Design Vue 和 Vue 的官方文档或社区寻求更具体的帮助。

    评论
  • 檀越@新空间 2025-01-15 02:15
    关注

    上午好☀️☀️☀️️
    本答案参考通义千问

    从你的描述来看,你在尝试通过 <script> 标签引入 @ant-design/icons-vue 时遇到了问题。主要问题在于如何正确地通过 <script> 标签引入并使用 @ant-design/icons-vue 的图标组件。以下是一些可能的解决方案:

    解决方案

    1. 确保正确引入 @ant-design/icons-vue

      • 需要确保通过 <script type="importmap"> 正确映射了 @ant-design/icons-vue
      • 确保 @ant-design/icons-vue 的 CDN 地址是正确的。
    2. 确保 Vue 和 Ant Design Vue 的版本兼容

      • 由于你在使用 Vue 3.4.15,确保 @ant-design/icons-vue 的版本与之兼容。
    3. 确保正确注册和使用图标组件

      • 在 Vue 组件中正确导入并注册 @ant-design/icons-vue 的图标组件。

    以下是修改后的代码示例:

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Test</title>
      <script type="text/javascript" src="../static/C_IMPORT_ANTDV.js"></script>
      <script type="importmap">
        {
          "imports": {
            "@ant-design/icons-vue": "https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@7.0.1/dist/index.esm.js"
          }
        }
      </script>
    </head>
    
    <body>
      <body style="display: flex; justify-content: center;">
        <!-- 页面布局 Bgn -->
        <div id='app' style="width: 1190px; padding-top: 8px;">
          <a-config-provider :locale="locale">
            <down-outlined />
          </a-config-provider>
        </div>
    
        <script type="module">
          import { createApp } from 'vue';
          import { DownOutlined } from "@ant-design/icons-vue";
          import { ConfigProvider } from 'ant-design-vue';
    
          // 初始化日期库
          import dayjs from 'dayjs';
          import 'dayjs/locale/zh-cn';
          dayjs.locale('zh-cn');
    
          // 初始化 Ant Design Vue
          import 'ant-design-vue/dist/antd.css';
          import { LocaleProvider } from 'ant-design-vue';
    
          const locale = LocaleProvider.locales['zh-CN'];
    
          createApp({
            components: {
              DownOutlined,
              'a-config-provider': ConfigProvider,
            },
            data() {
              return {
                locale,
              };
            },
            template: `
              <div>
                <a-config-provider :locale="locale">
                  <down-outlined />
                </a-config-provider>
              </div>
            `,
          })
          .use(ConfigProvider)
          .mount('#app');
        </script>
      </body>
    </body>
    
    </html>
    

    详细步骤说明

    1. 引入 @ant-design/icons-vue

      • 使用 <script type="importmap"> 映射 @ant-design/icons-vue 到正确的 CDN 地址。
      • 确保 @ant-design/icons-vue 的 CDN 地址是 https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@7.0.1/dist/index.esm.js
    2. 初始化 Vue 应用

      • 使用 createApp 创建 Vue 应用实例,并导入必要的组件和图标组件。
      • 注册 DownOutlined 图标组件到应用中。
    3. 初始化 Ant Design Vue

      • 导入 ant-design-vue 的样式文件。
      • 使用 ConfigProvider 组件包裹应用,并设置本地化配置。
    4. 使用图标组件

      • 在模板中直接使用 DownOutlined 图标组件。

    通过以上步骤,你应该能够正确地通过 <script> 标签引入并使用 @ant-design/icons-vue 的图标组件。如果还有其他问题,请检查控制台的错误信息,以进一步调试。

    展开全部

    评论
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部