如何将一个简单的 Vue.js 应用程序作为小部件嵌入到非 Vue 网站上？

Question

我在 Vue.js 应用程序中内置了一个小工具，我想在另一个网站上将其用作现有单页面上的小部件。该应用程序是一款内部应用程序，客户也希望在其消费者网站上使用这一工具。（消费者网站目前仅使用 jQuery 和 Underscore。）

如何将 Vue 组件嵌入到现有非 Vue 网页的 HTML 元素中？

到目前为止，我的谷歌搜索似乎只提到将应用程序作为完整页面嵌入到现有网站中，而不是专门嵌入现有页面。我的一个猜测是，查看该工具构建的 dist 目录，您可以尝试提取它生成的代码，但我不知道这是否会与页面的非 Vue 部分发生冲突，并且看起来非常混乱。

谢谢你！

Answer 1

我认为您提出的解决方案效果很好。我为现有的 Django 项目执行此操作，到目前为止没有重大冲突。

1. 告诉 vue 您在 中使用修改后的路径vue.config.js，例如，如果您将其导出到静态文件夹/static/vue/。

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    publicPath: '/static/vue/', 
    outputDir: '../django-project/static/vue/',
})

2. index.html通过在现有页面模板的头部导入所需的样式 dist 文件来复制现有页面中的 vue

<link href="/static/vue/css/chunk-vendors.css" rel="stylesheet">
<link href="/static/vue/css/app.css" rel="stylesheet">

以及模板底部的 javascript 文件

<script defer src="/static/vue/js/chunk-vendors.js"></script>
<script defer src="/static/vue/js/app.js"></script>

3. #app并在要放置应用程序的模板正文中添加带有安装 ID（此处）的 div 。

<div id="app"></div>

尺寸等样式当然将从包含的网页继承。