Nodejs 怎么引用public下得js文件

Nodejs 怎么引用public下得js文件

用express的项目

我怎么引用public下js文件呢

4 回复

当然可以！以下是如何在使用 Express 的 Node.js 项目中引用 public 目录下的 JavaScript 文件的详细说明和示例代码。

标题：

Node.js 如何引用 public 目录下的 js 文件

内容：

在使用 Express 框架的 Node.js 项目中，通常我们会将静态资源（如 CSS、JavaScript 文件）放在 public 目录下。为了能够从 HTML 页面或其他 JavaScript 文件中引用这些资源，我们需要进行一些配置和编写适当的引用路径。

1. 配置静态资源目录

首先，在你的 Express 应用中，需要配置静态资源目录。默认情况下，Express 会提供一个中间件来处理静态文件，我们可以通过调用 app.use(express.static('public')) 来指定 public 目录为静态资源目录。

const express = require('express');
const app = express();

// 设置 public 目录为静态资源目录
app.use(express.static('public'));

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

在这个例子中，我们将 public 目录设置为静态资源目录。这意味着所有位于 public 目录下的文件（例如 public/js/myfile.js）都可以通过 URL 访问。

2. 引用 JavaScript 文件

假设你有一个 HTML 文件 views/index.ejs，你可以通过相对路径或绝对路径来引用 public 目录下的 JavaScript 文件。

方法一：使用相对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/js/myfile.js"></script>
</body>
</html>

方法二：使用绝对路径

如果你的 HTML 文件位于 views 目录下，你也可以使用绝对路径来引用 public 目录下的 JavaScript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/js/myfile.js"></script>
</body>
</html>

在这两个例子中，/js/myfile.js 表示 public/js/myfile.js 文件。通过这种方式，你可以确保浏览器能够正确加载并执行你的 JavaScript 文件。

希望这些信息对你有所帮助！


app.use(express.static(path.join(__dirname, ‘public’)));

app.use(express.static(path.join(__dirname, 'public')));

在Express.js项目中引用public目录下的JavaScript文件非常简单。默认情况下，Express会将public目录作为静态资源文件夹处理，所以你可以直接通过HTTP路径来访问这些文件。

示例目录结构

my-express-app/
├── public/
│   └── scripts/
│       └── myscript.js
├── routes/
│   └── index.js
├── views/
│   └── index.ejs
└── app.js

在HTML文件中引用

假设你有一个HTML文件（例如index.ejs）在views目录下，你可以通过以下方式引用public/scripts/myscript.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <!-- 引用位于public/scripts/目录下的JavaScript文件 -->
    <script src="/scripts/myscript.js"></script>
</body>
</html>

在Express路由中提供静态文件服务

确保你的app.js或server.js中已经设置了静态文件服务：

const express = require('express');
const path = require('path');

const app = express();

// 设置public目录为静态资源文件夹
app.use(express.static(path.join(__dirname, 'public')));

// 其他中间件和路由配置...

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

这样，Express就会自动处理对public目录下所有文件的请求，并将其正确地发送给客户端。

示例文件内容

假设myscript.js内容如下：

console.log('Hello from myscript.js');

当你访问包含该脚本的HTML页面时，浏览器的开发者工具控制台将会输出Hello from myscript.js。

以上就是在Express.js项目中引用public目录下JavaScript文件的基本方法。

回到顶部