如何通过CDN在NetSuite Vue宏中使用Ant Design Vue？

数据老陈

2026-6-29

解决NetSuite Vue宏里Ant Design Vue加载失效问题

一、先把CDN引入顺序搞对

这是最容易踩的坑，必须按这个顺序来，不然依赖加载乱了直接出问题：

先加载Vue的CDN（注意版本匹配：Vue3对应Ant Design Vue3.x，Vue2对应1.x）
再加载Ant Design Vue的CDN
最后加样式CDN

给你个可用的引入代码：

<!-- Vue 3 全局版CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Ant Design Vue 3.x CDN -->
<script src="https://unpkg.com/ant-design-vue@3/dist/antd.min.js"></script>
<!-- 必须加的样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3/dist/reset.css">
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3/dist/antd.min.css">

二、全局注册AntD组件

光引CDN没用，得把AntD的组件注册到Vue里才能解析使用：

// 创建Vue实例前先完成注册
const app = Vue.createApp({
  // 你的组件业务代码
})
// 全局注册所有AntD组件，嫌体积大的话也可以只注册需要的，比如Modal
app.use(antd)
// 单独注册Modal的写法：app.component('a-modal', antd.Modal)
app.mount('#app')

三、解决antd全局变量找不到的问题

别着急在CDN加载完成前访问antd，要么把业务代码写在CDN脚本之后，要么等DOM加载完成再调用：

document.addEventListener('DOMContentLoaded', () => {
  console.log(antd) // 这会儿就能正常拿到全局变量了
})

四、在showAlert里调用模态框

注册完成后直接调用即可，不管是全局函数还是Vue组件方法内：

function showAlert() {
  antd.Modal.success({
    title: '提示',
    content: '模态框已正常弹出',
    onOk() {}
  })
  // 如果是在Vue组件的方法里，也可以用this.$modal.success
}