javascript - 如何将 vue 应用程序包含在另一个 vue 应用程序中？-6ren

javascript - 如何将 vue 应用程序包含在另一个 vue 应用程序中？

转载作者：行者123 更新时间：2023-12-03 23:34:33

我目前被要求生成将包含在不同客户网站中的小部件。

让我们这样说:

有2个约束:

禁止使用 iframe

客户网站可以使用任何技术(PHP、React、ANGular、Vue.js、JQuery...)

由于请求的小部件应该是交互式的，我想使用 javascript 框架开发它(我想到了 Vue.js)。

但是，我认为这可能会导致一些冲突(甚至破坏客户的网站)，例如如果客户的网站已经在使用另一个版本的 Vue.js。

我花了几个小时寻找和思考解决方案，但期望使用 iframe 我没有找到任何东西......

=> 有没有办法将 Vue.js 应用程序包含在另一个 Vue.js 应用程序(或 React、Angular 等)中？

在此先感谢您的帮助。

最佳答案

重要编辑 :
自从我写了这个答案后，我发现了一种更简单的方法，可以将整个项目包装为单个 .js文件，documented here .
如果您需要更多地控制应用程序的实例化时间以及它是否应该包含 Vue，这是原始答案(不是声称它更好 - 我只是在没有任何替代方案的时候写了它，并且它有效):

原答案 :
我目前的公司通常在我们客户的网页中提供嵌入式应用程序。
注意:虽然下面的例子是写在 .ts ，在 .js 中几乎相同.
在测试了各种方法(Vue 非常灵活)之后，我们最终做了以下工作:
该方法的灵感来自 mapbox-gl的模型，适配 Vue。
基本原理很简单:将整个应用导出为干净的 JS 类(通过单个脚本导入)并运行

new SomeClass(selector, config);

为此，我通常创建一个 someClass.ts文件(通常会执行 main.ts 的工作)，但会导出一个类:

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import i18n from '@/plugins/i18n';
import VA from 'vue-axios';
import axios from 'axios';
import store from './store';
...

Vue.use(VA, axios);
Vue.config.productionTip = false;

const Instance = new Vue({
  store,
  i18n,
  components: { App },
  data: () => ({ config: {} }),
  render: function(createElement) {
    return createElement('app', {
      props: { config: this.config }
    });
  }
});

export default class SomeClass {
  constructor(selector: string, config: SomeClassConfig) {
    Vue.set(Instance, 'config', {
      ...config,
      // id is optional. but allows setting the app's `id` dynamically to same `id`
      // as the context page placeholder (which app replaces), for consistency
      // for this, you have to assign `config.id` to App's `$el` in its `mounted()`
      id: selector.replace('#', '')
      // or document.querySelector(selector).id || 'someClassApp'
    });
    Instance.$mount(selector);
    return Instance;
  }
}

// optional exports, used for type inheritance throughout the app
export const { $http, $t, $store } = Instance;

注:让这一切变得清晰: 无上述进口是必要的(即: axios ， i18n 等...... - 这只是一个例子)。做任何你的 main.ts (或 main.js )通常是这样做的。然后创建 Instance ，注入(inject)配置，从 Instance 导出你可能需要的类和任何命名的导出.
上面已经完成了工作(如果你使用下面指定的 build 命令构建它)，但你还必须适应 main.ts导入此类并在服务时呈现应用程序:

import SomeClass from '@/someClass';

export default new SomeClass('#devhook', {
 // config object
});

const app = document.querySelector('#devhook');
if (app instanceof HTMLElement) {
  app.addEventListener('some-event', function(e) {
    if (e instanceof CustomEvent) {
      console.log(e.detail);
      // you can test events emitted for context app here...
    }
  });
}

和 public/index.html看起来像这样:

<!DOCTYPE html>
<html lang="en">
  <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">
    <link rel="icon" href="./favicon.ico">
    <!-- VueJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="devhook"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

构建命令是:

vue-cli-service build --target lib --name SomeClass --inline-css --inline-vue src/someClass.ts

请注意，我们正在导出 src/someClass.ts .您最终会得到一个名为 SomeClass.umd.js 的文件。 .
此外，将此设置添加到 config.vue.js :

configureWebpack: {
  output: {
    libraryExport: 'default'
  }
}

将使您能够在没有 .default() 的情况下初始化类(class)当您在上下文页面中导入它时。如果没有上面的 webpack 选项，你需要像这样初始化它:

new Someclass.default(selector, config);

其他一切都很标准。
现在上下文页面只需要导入 .umd.js , 实例化应用程序

new SomeClass(selector, config)

...并在呈现的元素上添加一个或多个监听器。 .umd.js可以从外部服务器提供导出服务，并且显然可以从 npm 导入。包裹。
您不必 --inline-css和 --inline-vue如果单独加载它们更有意义(即:Vue 可能已经存在于上下文页面中)。此外，我经常依赖上下文页面中已经存在的库(您希望尽可能多地重用库)，使用 vue.config.js :

configureWebpack: {
  externals: {
    lodash: 'window._'
  }
}

执行此操作时，请记住在 public/index.html 中添加指向 lodash/jquery/whatever cdn 的脚本，所以它在服务/开发时被加载，就像在上下文页面中一样。
最后， demo.html (用于展示产品构建)，如下所示:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Some Class App Demo</title>
    <link rel="shortcut icon" href="./favicon.ico"/>

    <!-- also works when served from a different domain -->
    <script src="./SomeClass.umd.min.js"></script>
    <link rel="stylesheet" href="./SomeClass.css">

</head>
<body>
<div id="SomeClassApp"></div>

<script>
  const config = {
    // whatever
  };
  const app = new SomeClass('#SomeClassApp', config);

  if (app.$el instanceof HTMLElement) {
    app.$el.addEventListener('some-event', function(e) {
      if (e instanceof CustomEvent) {
        console.log(e.detail);
      }
    });
  }
</script>
</body>

当然，您必须在应用程序的脚本 ( ./SomeClass.umd.min.js ) 之前添加所有外部组件，如果您使用过的话。不要 defer他们。该应用程序期望它们加载到 window到它开始的时候。
至于冲突，你不应该有。 Vue 在未成年人之间高度兼容，因此您可以简单地使用上下文页面的 Vue(而不是内联它)。此外，Vue 2 语法应该与 Vue 3 完全兼容(例如，您可以使用 Vue 3 运行 Vue 2 应用程序而无需对其进行任何更改 - 我们将拭目以待)。

关于javascript - 如何将 vue 应用程序包含在另一个 vue 应用程序中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61899394/

文章推荐： java - 在 com.unity3d.player 中找不到 UnityPlayerActivity 类

文章推荐： javascript - javascript中的日期时间，这是一个错误吗？

文章推荐： blockchain - 区 block 链如何安全？

c++ - 如何仅将整数从文件读取到也包含字符串的c++程序中？
我有一个包含数字和整数的文件，我只想读取整数，如果它们令人讨厌，请忽略宏，但是我只需要有整数，但是我必须确保还要读取字符串，然后忽略它们我必须在这里修改什么: #include #include
无法将双数正确导入到 C 程序中
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
c++ - 将flex生成的代码放到一个普通的C++程序中
我创建了一个简单的文件，使用 flex，它生成了一个文件 lex.yy.c，现在，我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
c++ - 是否可以将一段代码插入到已经存在的 C++ 程序中？
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中？这是一个小例子，可以清楚地说明我想要实现的目标。生成的文件示例: FirstClass first
检查输入十六进制消息的第三个位置 --> 在 C 程序中
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置，即 0 现在程序将采用另一条十六进制值的
c - 如何将最终摘要消息放入 yacc 程序中？
当我将输入从输入文件重定向到 yacc 程序时，在它完成解析文件后，我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D，我希望它执行相同的操作。有办法做到这一点吗
c - 将文本文件加载到 C 程序中
我正在扫描该文件，但它有两种不同的结构。文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
c - 是否可以将winsock2动态链接到我的c/c++程序中
我想将winsock2.lib 添加到我的程序中，但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗？如果没有，是否有任何 dll(Windows 附带)
java - 如何将数据库中的元素检索到 JDBC 程序中
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后，运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
c++ - 将压缩文件嵌入到 C++ 程序中
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型，例如 zip 或 gzip，像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
c - 卡在交互式 openGL 程序中
每次尝试用鼠标输入两个顶点时，我都会崩溃。我最近改变了组织每个形状的方式，以确保新形状与旧形状重叠。这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择，然后选择
python - 如何使以下文本出现在我的 python 程序中？
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时，它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
java - 需要帮助将文件加载到 java 程序中
我正在尝试加载名为 Tut16_ReadText.txt 的文件，并使其运行程序以输出其重或轻。我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
python - 有没有办法在命令行中将列表输入到 Python 程序中？
我想使用命令行将列表作为参数传递，例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list，[4,5,6] 成为 se
c# - 在C#程序中，ThePreStub是什么？
在分析 C# 应用程序时，我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么？最佳答案参见:CLR Inside out - The Performanc
java - 如何将斯坦福解析器软件集成到我的 java 程序中？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
python - 如何将我自己的图标添加到 Python 程序中
我正在用 Python 开发一个游戏，想知道如何给它自己的图标。我使用的是 Windows 计算机，没有安装 Python 的额外东西。哦，我也在使用 3.3 版，这甚至可能吗？ P.S 我在 Sta
python - 如何将谷歌地图嵌入到我的 Python 程序中？
我正在使用 tkinter 使用 Python 开发一个项目，该项目将允许对 IP 地址进行地理定位。我有原始转换，我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
c - 为什么我的代码突然停在这个 C 程序中？
我编写了一个程序，您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常，直到它到达某个部分，然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
无法访问特定的内存地址。在 C 程序中
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。这是我的代码。下面是我的问题。 #include void usage(char

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将 vue 应用程序包含在另一个 vue 应用程序中？