node express项目中将静态资源公开

一、node express项目中将静态资源公开

步骤

• 引入依赖模块
• 通过 app.use 公开静态资源

代码

const express = require("express");
// 专门用来辅助操作路径
const path = require("path");

// path.join()【path模块提供的拼接路径的方法】
// __dirname【node内置全局变量】
// 代表动态的绝对路径，使用它与要公开的资源目录拼接，即使资源被移动也能获取正确的路径
app.use('/node_modules/',express.static(path.join(__dirname,'/node_modules/')));

二、为什么使用express的app.use()将静态资源公开了还是读取不到文件。

在解决这个问题之前我们应当先了解一个知识 👉

使用node启动的项目，在寻找相对路径的文件时 (如app.use、fs.readFile等)，不是相对于定义该路径的文件，而是相对于执行node命令时所处的终端路径

require等关于模块的操作除外

拿app.use举例

我们现在通过app.use()来公开 public 静态资源目录

项目结构如下

现在app.js放在了src目录下，在终端打开node_test目录，运行node src/app.js。

相对app.js寻找public

可以看到，在app.js中想要通过相对路径找到public目录，应当是./../public。

• 定义app.use(服务器启动后能够获取该静态资源的路径别名，静态资源在本地的真实路径)：

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

• 结果：

以上，我们可以看到相对app.js获取public是错误的。

相对运行node命令的终端路径寻找public

• 当前的终端路径如下

从node_test目录找 public，应当是./public

• 定义app.use

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

• 结果：

  

app.js源文件

const express = require("express");

const app = express();
app.use("/public/", express.static("./public"));
app.listen(3000, () => {
  console.log("server is running on http://127.0.0.1:3000");
});

建议使用__dirname来拼接，得到绝对路径，避免出错

使用__dirname来拼接时，后面的部分就要写成相对于当前文件的相对路径。

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

const app = express();

console.log(path.resolve(__dirname, "./../public"));
// console结果为：D:\VSfiles\node_test\public

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

app.listen(3000, () => {
  console.log("server is running on http://127.0.0.1:3000");
});

三、参考文献

• 黑马程序猿nodejs视频教程（李鹏周）