如何解决如何在grapesjs的编辑器中渲染用Vue创建的SPA？
我正在尝试渲染一个用 Vue 创建的网站，在grapesjs 的编辑器中。但是我一直无法成功加载它。我知道这应该是可能的，因为编辑器使用 iframe 加载其数据，如果我修改创建的 iframe 属性 src="https://www.trinacia.com" 它会在视图中加载网站；然而，这种方法不允许我使用grapesjs的编辑器修改网站，所以这对我来说不是一个真正的解决方案。
我的代码如下：
HTML：
<div id="gjs">
</div>
JS：
const grapesjs = require(''grapesjs'');
const editor = grapesjs.init({
container: '#gjs',allowScripts: true,components: '<div id="app"></div>',canvas: {
scripts: [
{
src: 'https://www.trinacia.com/js/chunk-00744b8a.c4aad12d.js',rel: 'prefetch',},{
src: 'https://www.trinacia.com/js/chunk-4f5311ba.cb4a3329.js',{
src: 'https://www.trinacia.com/js/chunk-6366e45f.210d4ac5.js',{
src: 'https://www.trinacia.com/js/chunk-658805ed.26c40976.js',{
src: 'https://www.trinacia.com/js/compute.111be4ce.js',{
src: 'https://www.trinacia.com/js/app.f7d0b0a9.js',rel: 'preload',as: 'script',{
src: 'https://www.trinacia.com/js/chunk-vendors.1a362517.js',],styles: [
{
src: 'https://www.trinacia.com/css/chunk-00744b8a.b37a4bad.css',{
src: 'https://www.trinacia.com/css/chunk-658805ed.a0213277.css',{
src: 'https://www.trinacia.com/css/app.526274ca.css',as: 'style',{
src: 'https://www.trinacia.com/css/chunk-vendors.e2eba18d.css',rel: 'stylesheet',storageManager: false,});
editor.render();
可以在此处找到我尝试加载到编辑器中的网站：https://www.trinacia.com
该网站的 HTML 是：
<!DOCTYPE html>
<html lang="">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>Trinacia</title>
<link href="/css/chunk-00744b8a.b37a4bad.css" rel="prefetch">
<link href="/css/chunk-658805ed.a0213277.css" rel="prefetch">
<link href="/css/compute.16404adf.css" rel="prefetch">
<link href="/js/chunk-00744b8a.c4aad12d.js" rel="prefetch">
<link href="/js/chunk-4f5311ba.cb4a3329.js" rel="prefetch">
<link href="/js/chunk-6366e45f.210d4ac5.js" rel="prefetch">
<link href="/js/chunk-658805ed.26c40976.js" rel="prefetch">
<link href="/js/compute.111be4ce.js" rel="prefetch">
<link href="/css/app.526274ca.css" rel="preload" as="style">
<link href="/css/chunk-vendors.e2eba18d.css" rel="preload" as="style">
<link href="/js/app.f7d0b0a9.js" rel="preload" as="script">
<link href="/js/chunk-vendors.1a362517.js" rel="preload" as="script">
<link href="/css/chunk-vendors.e2eba18d.css" rel="stylesheet">
<link href="/css/app.526274ca.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but Trinacia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id="app"></div>
<script src="/js/chunk-vendors.1a362517.js"></script><script src="/js/app.f7d0b0a9.js"></script>
</body>
</html>
解决方法
我发现从 vue 应用程序注入的 js 修改了 iframe 文档并破坏了grapesjs 文档结构，所以为了真正让网站呈现，我不得不在后端服务中使用 crhome selenium API 并提取所有Vue 应用程序创建所有需要的 DOM 元素并将它们作为组件注入到葡萄树之后的文档组件。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
