应用场景：一些官网通过safari分享到微信的时候会生成卡片链接，这里面会有title,img,content如下图
一般公司会要求同步到公司相同的产品，这里会注意到vue项目中public文件夹下标签里面的我们可以在这里添加三个<meta标签>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta id="shareTitle" name="" content="">
<meta id="shareImage" name="" content="">
<meta id="shareContent" name="" content="">
<link rel="icon" href="<%= BASE_URL %>favicons.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
</head>
然后在不同需要分享的页面进行配置
// 适配苹果safari
const setInfo = () => {
/* const head = document.getElementsByTagName('head')[0];
const meta1 = document.createElement('meta') as HTMLMetaElement;
meta1.content = "讯飞智能耳机|未来智能";
meta1.setAttribute("property","og:title");
head.append(meta1);
const meta2 = document.createElement('meta') as HTMLMetaElement;
meta2.content = "https://www.apple.com/v/ipad/home/cc/images/meta/ipad__o3qwbzdfrlmy_og.png?202301192304";
meta2.setAttribute("property","og:image");
head.append(meta2);
const meta3 = document.createElement('meta') as HTMLMetaElement;
meta3.content = "来看看 iPad 的精彩世界，这里有新款 iPad 和 iPad Pro，以及强大的 iPad Air 和 iPad mini。";
meta3.setAttribute("property","og:description");
head.append(meta3);
const meta4 = document.createElement('meta') as HTMLMetaElement;
meta4.content = "https://www.apple.com.cn/ipad/";
meta4.setAttribute("property","og:url");
head.append(meta4)
const meta5 = document.createElement('meta') as HTMLMetaElement;
meta5.content = "zh_CN";
meta5.setAttribute("property","og:locale");
head.append(meta5)
const meta6 = document.createElement('meta') as HTMLMetaElement;
meta6.content = "Apple (中国大陆) - 官方网站";
meta6.setAttribute("property","og:site_name");
head.append(meta6)
const meta7 = document.createElement('meta') as HTMLMetaElement;
meta7.content = "website";
meta7.setAttribute("property","og:type");
head.append(meta7) */
const meta1 = document.querySelector("#shareTitle") as HTMLMetaElement;
meta1.content = "讯飞智能耳机|未来智能"
meta1.setAttribute("property","og:title");
const meta2 = document.querySelector("#shareImage") as HTMLMetaElement;
meta2.content = "https://iflybuds.oss-cn-hangzhou.aliyuncs.com/h5/image/img/logo.png"
meta2.setAttribute("property","og:image");
const meta3 = document.querySelector("#shareContent") as HTMLMetaElement;
meta3.content = "了解讯飞智能耳机（iFLYBUDS）与其背后的团队-未来智能。"
meta3.setAttribute("property","og:description");
};
这边就完成了。
