如何在 ejs 文件中使用外部 javascript 文件
[英]How to use external javascript file into an ejs file
问题描述
I'm working in a new web portal.
我在一个新的门户网站工作。 So far using the express and node.js i have a server and some ejs files.到目前为止，使用 express 和 node.js 我有一个服务器和一些 ejs 文件。
The body structure of my site is like this:我网站的主体结构是这样的：
- 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服务器.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 ');
and the index.ejs和 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>
In the partials i want to call and use an external .js file /public/javascript/myScript.js so i can use variable from it in my ejs page or send a variable.在部分中，我想调用并使用外部 .js 文件/public/javascript/myScript.js以便我可以在我的 ejs 页面中使用它的变量或发送一个变量。
my js file have a simple function (just to see if it's working) that print in console if the button (in index.ejs) is pressed.我的 js 文件有一个简单的函数（只是为了看看它是否工作），如果按下按钮（在 index.ejs 中），它会在控制台中打印。
myScript.js我的脚本.js
$(function() {
$("button").on("click", function () {
console.log("button pressed");
});
});
I'm trying to call the external js in head.ejs ( or in index.ejs )...我正在尝试在 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>
but i'm getting this error (in console)但我收到此错误（在控制台中）
Loading failed for the <script> with source “http://localhost:8080/pubic/javascript/myScript.js”.
Any idea why this happens and how to solve it?知道为什么会发生这种情况以及如何解决吗？
2 个解决方案
解决方案1
1 2019-03-24 10:40:08
Since you are trying to load client-side JavaScript, the fact you are using EJS is irrelevent.由于您正在尝试加载客户端JavaScript，因此您使用 EJS 的事实无关紧要。 A standard HTML script element is all you need in the template, and you have that.模板中只需要一个标准的 HTML 脚本元素，而您已经拥有了。
You do, however, need to provide a URL (with the src attribute) that the web browser can use to fetch the script … and your script has no URL.但是，您确实需要提供一个 URL（带有 src 属性），Web 浏览器可以使用该 URL 来获取脚本……而您的脚本没有 URL。
You are getting the message Loading failed for the with source “http://localhost:8080/pubic/javascript/myScript.js”.您收到消息Loading failed for the source “http://localhost:8080/pubic/javascript/myScript.js”. because it is a 404 Error.因为这是一个 404 错误。
You should use the static module to provide the JS file with a URL.您应该使用静态模块为 JS 文件提供 URL。
app.use("/public", express.static('public'))
解决方案2
0 2020-01-26 06:06:02
Add this to your server.js file, app.use(express.static(__dirname + "/public");将此添加到您的 server.js 文件 app.use(express.static(__dirname + "/public");
And to link the js file with your ejs file,并将 js 文件与您的 ejs 文件链接起来，
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.