Node框架之express加载静态文件详解

1.首先使用npm命令进行初始化项目

  npm init (下一步下一步)

2.然后安装express 框架包

  npm install express --save

3.接下来就很关键了,如果你是在根目录也就是和node_modules处于同一级目录,工程目录如下

Node框架之express加载静态文件详解_第1张图片

(1)创建main.js 

Node框架之express加载静态文件详解_第2张图片

(2)创建静态资源目录

 创建public/htmls/Hello.html

 Hello.html可以简单些

(3)运行main.js

Node框架之express加载静态文件详解_第3张图片

 

(4)打开浏览器访问

Node框架之express加载静态文件详解_第4张图片

 

但是开发者有时候不想暴露真实的目录,你可以在刚才的main.js文件中

/static 可以改为你想要的目录格式。切记:它只是虚拟目录.

 

以上只是解决了开发者访问自定义目录,访问静态静态文件。但此时我们又想main.js不想创建根目录,于是我们就在根目录创建了

Node框架之express加载静态文件详解_第5张图片

红色标记main.js是你的新需求,所以修改如图。

Node框架之express加载静态文件详解_第6张图片

此时浏览器用这种方式访问

Node框架之express加载静态文件详解_第7张图片

你可能感兴趣的:(前端)