nodejs的路径问题的解决


Posted in NodeJs onJune 30, 2018

最近公司的一个开发项目,后端用的是nodejs。这两天需要打包给客户演示,就让公司一个小伙把之前3D机房的打包工具移植过来。打包之后,发现原本在开发环境下的跑的好好的项目,不能访问了。出现项目的首页不能访问的问题:

can not get file index.html

express.static

问题出在哪儿?

nodejs后端的用了express,index.html是一个静态文件。我们知道,通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 public 目录放置了图片、CSS 和 JavaScript 文件,可以使用如下代码:

app.use(express.static('public'));

所以,找到项目中的代码,查看static调用的地方,和上面一行代码很一样:

app.use(express.static('public'));

到此,我已经发现了问题,我告诉小伙伴,这个地方不用相对路径可以解决这个问题。由于打包时间限制,我让小伙伴先简单处理下,打完包之后,在来整理下思路:

app.use(express.static('resource/public'));

当然最重要的是,这个问题其实不难,自己多钻研下,很容易发现问题,也就不会出这个问题,所以小伙伴自己打手心吧。

恩,你没看错,这个地方还是相对目录。后续产品中会改成比较好的一种情况。

express.static方法解析

事实上,express.static方法如果传入的是相对路径,express会自己把他转换为绝对路径,我们可以查看下源代码,在express.js找到如下代码:

exports.static = require('serve-static');

说明static 调用了serve-static这个包,直接找到这个包,查看index.js, 可以看到代码,下面列出重要的两行

...
var resolve = require('path').resolve
...
opts.root = resolve(root)
...

这两行就是,express把相对目录转换成绝对目录的代码,可以看出,最终使用的path这个内置对象的resolve方法,继续往下看。

path对象的resolve方法

直接查看这个方法的api文档,如下:https://nodejs.org/api/path.html#path_path_resolve_paths

下面是这个方法的解释:

The path.resolve() method resolves a sequence of paths or path segments into an absolute path.

啥意思呢? 就是这个方法把一系列的paths或者path segments 组织成一个绝对路径,比如

path.resolve('/foo','bar');
// return /foo/bar

详细的说明请自行参考文档,这个地方有一句话需要特别注意:

If after processing all given path segments an absolute path has not yet been generated, the current working directory is used.

啥意思,就是如果处理完了所有的path segments,也没有生成一个绝对路径, 就要使用 当前工作目录(current working directory)。比如:

path.resolve('bar');
// 加上 /Users/terry 是当前工作目录, return /Users/terry/bar

api文档中一个比较复杂的示例(此处注意resolve的时候,从右到左,参考文档了解详情):

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// if the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'

现在的问题是,啥是当前工作目录。

nodejs 当前工作目录 current working directory

nodejs 当前工作目录是启动Node的目录。也就是说,从哪个目录进去启动node,就返回哪个目录。 

注意,这个目录不是指js文件所在的目录

通过process.cwd()方法可以获取当前工作目录。

下面通过一个示例来介绍这个当前工作目录,假如在/Users/terry/Documents/JSWorkspace目录下写一个js文件,test.js,代码只有一行:

console.log(process.cwd());

此时如果,在目录/Users/terry/Documents/JSWorkspace下面执行命令 :node test.js 输出如下:

/Users/terry/Documents/JSWorkspace

但是如果在在目录/Users/terry/Documents/下面执行命令:node ./JSWorkspace/test.js,输出的结果是:

/Users/terry/Documents

因此可以看出你在那个目录执行node命令,当前目录就是那个目录。

回到之前的打包的问题,由于在开发阶段,一般都是直接在js文件所在目录执行node命令,所以相对目录写的是相对于当前js文件的目录没有问题。

可是打包之后,node的执行放到了js目录的上一层去了。此时相对目录“public”不在是相对于js文件的相对目录,而是相对于上一层的,自然就找不到这个文件夹了,从而也找不到该文件夹下的index.html文件。

如何解决

解决的方法:

1.在前面已经说过了,改这个相对目录。但这种方法很蹩脚。因为,启动node命令的目录可能会变;而是如果这应该,开发阶段的node命令执行也需要跟着改。 总之不是兼容性很好的方法。

2.直接使用绝对路径。 但是这个绝对路径在不同的机器上又不一样,该如何解决呢?可以考虑使用全局变量__dirname.

全局变量__dirname

查看api文档 https://nodejs.org/api/modules.html#modules_dirname

看到解释如下:

The directory name of the current module. This is the same as the path.dirname() of the __filename。

啥意思呢,及时返回nodejs 的js文件的所在目录。

有了这个变量之后,我们就可以用如下代码解决这个问题。

app.use(express.static(__dirname + '/public'));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
NodeJS Express框架中处理404页面一个方式
May 28 NodeJs
快速掌握Node.js之Window下配置NodeJs环境
Mar 21 NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 NodeJs
nodejs mysql 实现分页的方法
Jun 06 NodeJs
CentOS 安装NodeJS V8.0.0的方法
Jun 15 NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
nodejs使用async模块同步执行的方法
Mar 02 NodeJs
nodejs微信开发之授权登录+获取用户信息
Mar 17 NodeJs
nodejs中实现用户注册路由功能
May 20 NodeJs
NodeJs 模仿SIP话机注册的方法
Jun 21 NodeJs
Nodejs libuv运行原理详解
Aug 21 NodeJs
nodejs用gulp管理前端文件方法
Jun 24 #NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 #NodeJs
nodejs实现套接字服务功能详解
Jun 21 #NodeJs
详解Nodejs mongoose
Jun 10 #NodeJs
详解NodeJs开发微信公众号
May 25 #NodeJs
nodejs express配置自签名https服务器的方法
May 22 #NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 #NodeJs
You might like
php5数字型字符串加解密代码
2008/04/24 PHP
php adodb介绍
2009/03/19 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
js href的用法
2010/05/13 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JavaScript操作Cookie详解
2015/02/28 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
原生js代码能实现call和bind吗
2019/07/31 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python文件操作基本流程代码实例
2017/12/11 Python
python psutil库安装教程
2018/03/19 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
华为的Java面试题
2014/03/07 面试题
施工资料员岗位职责
2014/01/06 职场文书
《三峡》教学反思
2014/03/01 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
趣味运动会策划方案
2014/06/02 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技