如何将外部javascript文件用于ejs文件答案

【问题标题】：How to use external javascript file into an ejs file如何将外部javascript文件用于ejs文件
【发布时间】：2019-08-14 19:21:39
【问题描述】：

我在一个新的门户网站工作。到目前为止，使用 express 和 node.js 我有一个服务器和一些 ejs 文件。

我网站的正文结构是这样的：

   - node modules
   - public
      --javascript
         ---myScript.js
   -views
      --pages
        ---index.ejs
        ---about.ejs
      --partials
        ---footer.ejs
        ---head.ejs
        ---header.ejs
    package.json
    server.js

server.js

var express = require('express');
var app = express();
app.set('view engine', 'ejs'); // set the view engine to ejs

app.get('/', function(req, res) {res.render('pages/index');}); // index page 
app.get('/about', function(req, res) {    res.render('pages/about');}); // about page 

app.listen(8080);
console.log('Portal is listening to port 8080 ');

和 index.ejs

<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
    <% include ../partials/header %>
</header>
<main>
<div class="jumbotron">
    <h1>MyPortal</h1>
        <button>Press</button>
    <% var test = 101; %>
    </div>
</main>
    <footer>
        <% include ../partials/footer %>
    </footer>
</body>
</html>

在部分中，我想调用并使用一个外部 .js 文件 /public/javascript/myScript.js，这样我就可以在我的 ejs 页面中使用它的变量或发送一个变量。

我的 js 文件有一个简单的功能（只是为了看看它是否工作），如果按下按钮（在 index.ejs 中），它会在控制台中打印。

myScript.js

$(function() {
  $("button").on("click", function () {
  console.log("button pressed");
   });
  });

我正在尝试调用head.ejs（或index.ejs）中的外部js...

<!-- views/partials/head.ejs -->
<meta charset="UTF-8">
<title>MyPortal</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body    { padding-top:50px; } </style>

<script type="text/javascript" src="/pubic/javascript/myScript.js"></script>

但我收到此错误（在控制台中）

Loading failed for the <script> with source “http://localhost:8080/pubic/javascript/myScript.js”.

知道为什么会发生这种情况以及如何解决吗？

【问题讨论】：

public 输入错误 pubic
是的，我只是展示它...我将其更改为“公共”，但问题仍然存在
你能在浏览器中打开脚本的 url 看看它是否显示什么吗？
type="text/javascript" 不应在 HTML 5 中使用。它除了允许您打错字和破坏脚本之外没有其他用途。
niko 在设置视图引擎后尝试添加这个app.use(express.static(path.join(__dirname, 'public')));。您还需要要求路径模块var path = require('path');

标签： javascript node.js express ejs

【解决方案1】：

由于您正在尝试加载 客户端 JavaScript，因此您使用 EJS 的事实是无关紧要的。模板中只需要一个标准的 HTML 脚本元素，而您已经拥有了。

但是，您确实需要提供一个 URL（带有 src 属性），Web 浏览器可以使用该 URL 来获取脚本……而您的脚本没有 URL。

您收到消息 Loading failed for the with source “http://localhost:8080/pubic/javascript/myScript.js”. 因为它是 404 错误。

您应该使用static module 为 JS 文件提供 URL。

app.use("/public", express.static('public'))

【讨论】：

我明白你在说什么。但即使在我的 server.js 文件中使用“app.use("/public", express.static('public'))" 我仍然看到无法加载脚本的错误
@Nikos Kalantas 看起来您正在使用 jQuery。如果是这样，请在您的 html 中链接 jquery cdn（最好在正文的末尾）和 jquery 链接标签之后的脚本标签（重要）

【解决方案2】：

将此添加到您的 server.js 文件中， app.use(express.static(__dirname + "/public");

并将 js 文件与您的 ejs 文件链接，

【讨论】：