在Vue中实现百度联盟广告的两种接入方法

开发vueH5项目时，遇到需要引入百度联盟广告的需求，总结了两种引入方式：

1. 第一种： npm引入：

   步骤一： npm install -S union-ad-vue //安装npm包;

   步骤二： 页面引入注册：

步骤三：页面使用： 注： 不可自定义，广告样式由联盟后台配置。Uid为配置的广告ID

2.第二种：script标签引入：

步骤一：在项目根目录下 public/index.html文件的head标签种使用script标签引入百度联盟JS

<script src="https://cpro.baidustatic.com/cpro/ui/c.js"></script>

步骤二： 页面中使用

(window.slotbydup = window.slotbydup || []).push({
      id: "uID",
      container: "ad_u123456",
    });

生成广告，并在template模板中使用div标签容器渲染

<div id="ad_u123456"></div>

注：

id：广告位id
container:：广告容器class值

详情可见百度联盟文档： union.baidu.com/miniappblog…