嵌入HTML文件的Javascript代码从不运行
我有一个基本的html文件，它提供了一个div容器，该容器试图通过从静态文件服务器请求另一个html文件（及其依赖项）来加载该文件。让我们调用基本应用程序base和渲染应用程序子应用程序嵌入HTML文件的Javascript代码从不运行,javascript,html,node.js,express,vue.js,Javascript,Html,Node.js,Express,Vue.js,我有一个基本的html文件，它提供了一个div容器，该容器试图通过从静态文件服务器请求另一个html文件（及其依赖项）来加载该文件。让我们调用基本应用程序base和渲染应用程序子应用程序 基本应用程序仅从文件服务器请求该子应用程序 index.html 静态文件服务器本身只是一个具有两条路由的基本Node/Express服务器。它应该始终服务于基本应用程序，除非明确请求子应用程序 app.js 子应用程序也有一些javascript代码，应该在从文件服务器提供服务后执行 index.htm
基本应用程序仅从文件服务器请求该子应用程序 index.html
静态文件服务器本身只是一个具有两条路由的基本Node/Express服务器。它应该始终服务于基本应用程序，除非明确请求子应用程序 app.js
子应用程序也有一些javascript代码，应该在从文件服务器提供服务后执行 index.html
在本地运行文件服务器并调用
localhost:3000/我想要实现什么 我的真实应用程序不嵌入简单的HTML文件。它应该嵌入生成的VueJs生成文件。该Vue应用程序的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">
<link rel=icon href=/favicon.ico>
<title>app-one</title>
<link href=/js/app.4783ebb3.js rel=preload as=script>
<link href=/js/chunk-vendors.c3422c1d.js rel=preload as=script>
</head>
<body>
<noscript><strong>We're sorry but app-one doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=customApp></div>
<script src=/js/chunk-vendors.c3422c1d.js></script>
<script src=/js/app.4783ebb3.js></script>
</body>
</html>
应用程序一
很抱歉，没有启用JavaScript，app one无法正常工作。请使其继续。
如果有人知道如何解决这个问题，那就太棒了。也许我的文件服务器可以解决所有这些依赖关系并为整个应用程序提供服务？“我认为出现此错误的原因是js文件的路径无效”，这当然可能是问题的一部分，但根本问题是，通过
innerHTML脚本元素根本不由浏览器运行。因此，当应用链接问题答案中描述的修复时，如果还存在路径问题，您可以同时解决该问题。例如，在中，您需要在添加脚本之前根据需要更新script.src
。@T.J.非常感谢。我希望我正确地理解了您，并将我的代码更新为：不幸的是，它不起作用：/如您所见，这是生成的DOM，路径仍然不正确。我误解你了吗？我没有看到你在那里调整script.src
。对不起，我想我不明白。我能在你的答案中找到这个吗？答案是关于如何运行文本中的脚本。我在上面的评论中说，您还将“…在添加它之前根据需要更新script.src
”（不过您可能需要script.getAttribute（“src”）
，这样您就得到了未扩展的版本）。然后根据原始路径和放置位置之间的路径差异调整。
document.addEventListener('DOMContentLoaded', async event => {
const response = await fetch(`http://localhost:3000/getMySubApp`);
const htmlContent = await response.text();
document.getElementById('subAppContainer').innerHTML = htmlContent;
});
const express = require('express');
const path = require('path');
const cors = require('cors');
const app = express();
const router = express.Router();
app.use(cors());
app.use(express.static(path.resolve(__dirname, '../base')));
app.use(express.static(path.resolve(__dirname, '../subApp')));
router.get('/getMySubApp', function(req, res) {
res.sendFile(path.resolve(__dirname, '../subApp/index.html'));
});
router.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname, '../base/index.html'));
});
app.use('/', router);
app.listen(3000, function() {
console.log('Fileserver listening on port 3000');
});
<!DOCTYPE html>
<html>
<body>
<script src="subAppCode.js"></script>
<h3>Sub app will load it's own js:</h3>
<a href="#content">jump to content div and manipulate browser url</a>
<div id="content"></div>
</body>
</html>
document.addEventListener('DOMContentLoaded', event => {
document.getElementById('content').innerHTML = 'js is running now.';
});
<!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">
<link rel=icon href=/favicon.ico>
<title>app-one</title>
<link href=/js/app.4783ebb3.js rel=preload as=script>
<link href=/js/chunk-vendors.c3422c1d.js rel=preload as=script>
</head>
<body>
<noscript><strong>We're sorry but app-one doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=customApp></div>
<script src=/js/chunk-vendors.c3422c1d.js></script>
<script src=/js/app.4783ebb3.js></script>
</body>
</html>