您好,登錄后才能下訂單哦!
最近公司的一個開發(fā)項目,后端用的是nodejs。這兩天需要打包給客戶演示,就讓公司一個小伙把之前3D機(jī)房的打包工具移植過來。打包之后,發(fā)現(xiàn)原本在開發(fā)環(huán)境下的跑的好好的項目,不能訪問了。出現(xiàn)項目的首頁不能訪問的問題:
can not get file index.html
express.static
問題出在哪兒?
nodejs后端的用了express,index.html是一個靜態(tài)文件。我們知道,通過 Express 內(nèi)置的 express.static 可以方便地托管靜態(tài)文件,例如圖片、CSS、JavaScript 文件等。
將靜態(tài)資源文件所在的目錄作為參數(shù)傳遞給 express.static 中間件就可以提供靜態(tài)資源文件的訪問了。例如,假設(shè)在 public 目錄放置了圖片、CSS 和 JavaScript 文件,可以使用如下代碼:
app.use(express.static('public'));
所以,找到項目中的代碼,查看static調(diào)用的地方,和上面一行代碼很一樣:
app.use(express.static('public'));
到此,我已經(jīng)發(fā)現(xiàn)了問題,我告訴小伙伴,這個地方不用相對路徑可以解決這個問題。由于打包時間限制,我讓小伙伴先簡單處理下,打完包之后,在來整理下思路:
app.use(express.static('resource/public'));
當(dāng)然最重要的是,這個問題其實不難,自己多鉆研下,很容易發(fā)現(xiàn)問題,也就不會出這個問題,所以小伙伴自己打手心吧。
恩,你沒看錯,這個地方還是相對目錄。后續(xù)產(chǎn)品中會改成比較好的一種情況。
express.static方法解析
事實上,express.static方法如果傳入的是相對路徑,express會自己把他轉(zhuǎn)換為絕對路徑,我們可以查看下源代碼,在express.js找到如下代碼:
exports.static = require('serve-static');
說明static 調(diào)用了serve-static這個包,直接找到這個包,查看index.js, 可以看到代碼,下面列出重要的兩行
... var resolve = require('path').resolve ... opts.root = resolve(root) ...
這兩行就是,express把相對目錄轉(zhuǎn)換成絕對目錄的代碼,可以看出,最終使用的path這個內(nèi)置對象的resolve方法,繼續(xù)往下看。
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
詳細(xì)的說明請自行參考文檔,這個地方有一句話需要特別注意:
If after processing all given path segments an absolute path has not yet been generated, the current working directory is used.
啥意思,就是如果處理完了所有的path segments,也沒有生成一個絕對路徑, 就要使用 當(dāng)前工作目錄(current working directory)。比如:
path.resolve('bar'); // 加上 /Users/terry 是當(dāng)前工作目錄, return /Users/terry/bar
api文檔中一個比較復(fù)雜的示例(此處注意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'
現(xiàn)在的問題是,啥是當(dāng)前工作目錄。
nodejs 當(dāng)前工作目錄 current working directory
nodejs 當(dāng)前工作目錄是啟動Node的目錄。也就是說,從哪個目錄進(jìn)去啟動node,就返回哪個目錄。
注意,這個目錄不是指js文件所在的目錄
通過process.cwd()方法可以獲取當(dāng)前工作目錄。
下面通過一個示例來介紹這個當(dāng)前工作目錄,假如在/Users/terry/Documents/JSWorkspace目錄下寫一個js文件,test.js,代碼只有一行:
console.log(process.cwd());
此時如果,在目錄/Users/terry/Documents/JSWorkspace下面執(zhí)行命令 :node test.js 輸出如下:
/Users/terry/Documents/JSWorkspace
但是如果在在目錄/Users/terry/Documents/下面執(zhí)行命令:node ./JSWorkspace/test.js,輸出的結(jié)果是:
/Users/terry/Documents
因此可以看出你在那個目錄執(zhí)行node命令,當(dāng)前目錄就是那個目錄。
回到之前的打包的問題,由于在開發(fā)階段,一般都是直接在js文件所在目錄執(zhí)行node命令,所以相對目錄寫的是相對于當(dāng)前js文件的目錄沒有問題。
可是打包之后,node的執(zhí)行放到了js目錄的上一層去了。此時相對目錄“public”不在是相對于js文件的相對目錄,而是相對于上一層的,自然就找不到這個文件夾了,從而也找不到該文件夾下的index.html文件。
如何解決
解決的方法:
1.在前面已經(jīng)說過了,改這個相對目錄。但這種方法很蹩腳。因為,啟動node命令的目錄可能會變;而是如果這應(yīng)該,開發(fā)階段的node命令執(zhí)行也需要跟著改。 總之不是兼容性很好的方法。
2.直接使用絕對路徑。 但是這個絕對路徑在不同的機(jī)器上又不一樣,該如何解決呢?可以考慮使用全局變量__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'));
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。