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 相关文章推荐
基于promise.js实现nodejs的promises库
Jul 06 NodeJs
NodeJS创建基础应用并应用模板引擎
Apr 12 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
学习 NodeJS 第八天:Socket 通讯实例
Dec 21 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
Sep 29 NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
nodejs检测因特网是否断开的解决方案
Apr 17 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
node快速搭建后台的实现步骤
Feb 18 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
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php分页函数完整实例代码
2014/09/22 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php中请求url的五种方法总结
2017/07/13 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
Vue异步加载about组件
2017/10/31 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Vue多选列表组件深入详解
2021/03/02 Vue.js
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中的变量和作用域详解
2016/07/13 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python编写一个优美的下载器
2018/04/15 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python实现多进程代码示例
2018/10/31 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
自考自我鉴定范文
2013/10/30 职场文书
房地产项目策划书
2014/02/05 职场文书
买房委托公证书
2014/04/08 职场文书
升职自我推荐信范文
2015/03/25 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript