使用 VueJs 为 HTML 创建一个聊天插件答案

【问题标题】：Create a chat plugin for HTML using VueJs使用 VueJs 为 HTML 创建一个聊天插件
【发布时间】：2020-01-20 04:31:48
【问题描述】：

我一直在使用 VueJs 开发一个用于 HTML 的聊天插件，问题是我不知道如何创建一个可用于在任何网站上部署此插件的插件。

基本上，我想发出一个 GET 请求，将聊天插件导入任何网站。例如：Facebook Messenger Chat Plugin

我有这个聊天视图的构建文件。我的下一步应该是什么？

提前致谢！

【问题讨论】：

标签： javascript html vue.js plugins

【解决方案1】：

我通过构建 VueJs 文件并从构建的文件中删除 , , , 然后将其导入到任何 HTML 文件中解决了这个问题：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="floating-chat"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
axios.get('https://dfe43d80.ngrok.io/views').then(({data})=>{
    $('#floating-chat').html(data);
}).catch(err=>console.log(err));
</script>

不要忘记替换服务器中的所有链接并使用 express.static

app.use(express.static(__dirname+'/dist'));

fs.readFile(__dirname + '/dist/index.html', 'utf8', (err, html)=>{
    if(err){
        console.log(err);
    }
    html.replace('href=/js',`href=https://YOURWEBISTE.COM/js`);
    html.replace('href=/css',`href=https://YOURWEBISTE.COM/css`);
    html.replace('src=/js',`src=https://YOURWEBISTE.COM/js`);
    console.log(html);
    res.send(html);
});

并使用 CORS 让其他页面导入您的 HTML 内容。

【讨论】：