如何将我的 JS 文件从不同的目录链接到我的 EJS 文件

问题描述 投票:0回答:1

我在以下目录中有一个 ejs 文件:

./admin/admin.ejs

我在以下目录中有普通的旧 JS 文件:

./public/client.js

以及以下目录中的 Express 应用程序:

./app.js

使用以下代码渲染 ejs 文件:

const express = require("express");
const { Server } = require("socket.io");
const { sessionMiddleware, wrap } = require("./server/sessionStore");
const { createServer } = require("node:http");
const { join } = require("node:path");

const app = express();
const server = createServer(app);

const db = require("./databases/dbChooser");
const config = require("./server/config");
const { banCheckMiddleware } = require("./server/middleware");

const io = new Server(server, config.cors);

const WorkerPool = require("./server/workerPool");
const workers = new WorkerPool(1, "./drawingWorker");

app.use(sessionMiddleware);
app.use(banCheckMiddleware);

app.set("view engine", "ejs");
app.set("views", join(__dirname, "./admin"));

app.get("/", (req, res) => {
  if (!req.session.initialized) {
    req.session.initialized = true;
    req.session.visitCount = 1;
  } else {
    req.session.visitCount = (req.session.visitCount || 0) + 1;
  }
  res.sendFile(join(__dirname, "./public/index.html"));
});

app.use(express.static("public"));
app.use(express.static("admin"));

ejs 渲染良好,一切都在表面上运行,但是当我尝试在 EJS 文件中使用 client.js 脚本时,出现以下错误:

Refused to execute script from 'http://127.0.0.1:3000/public/client.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我的快速解决方法是在管理目录中创建一个单独的 js 文件,然后将客户端 js 代码复制并粘贴到其中,并且工作正常,没有错误。我也尝试这样做:

   <script type = "text/javascript" src="../public/client.js"></script>
但这不起作用。管理目录中的 JS 和 CSS 文件工作正常,但是当我尝试从不同的目录引用另一个文件时,它就会生气。

javascript node.js express ejs
1个回答
0
投票

请参阅以下示例,它们可以帮助您阐明express.static中间件的工作原理,以及相关参考资料

以下两条语句本质上将使两个单独的文件夹可以从同一请求 URL 访问。

app.use(express.static('admin'));
app.use(express.static('public'));

示例:

假设站点下有以下文件夹和文件。

<site directory>
   public
      code1.js
   admin
      code2.js

现在,让我们假设来源为 http://localhost:3000

如果是这样,则来自浏览器的以下两个直接请求是有效的。这两个请求都将在浏览器中显示相应文件的源代码。

  1. http://localhost:3000/code1.js
  2. http://localhost:3000/code2.js

在此基础上,让我们看看从文件引用它时是否相同。

让我们假设以下站点,index.html 位于公共文件夹中。其内容如下所示。

<site directory>
   public
      index.html
      code1.js
   admin
      code2.js

index.html

<!DOCTYPE html>
<head>
  Reference to JS
</head>
<body></body>
<script src="./code1.js"></script>
<script src="./code2.js"></script>

如果是这样,请求URL http://localhost/index.html 将成功加载同一个文件-index.html,然后分别执行code1.js 和code2.js 中的代码。这意味着其中的两个引用是有效的,并注意 code2.js 来自另一个文件夹 admin。

注:

请注意,一旦 EJS 文件呈现,它就变成了普通的 html 文件,其中引用的 JavaScript 源文件将被执行 就像在普通的 html 文件中一样。这就是我没有将 EJS 文件带入上面的讨论和示例的原因。

© www.soinside.com 2019 - 2024. All rights reserved.