下# 目錄 路徑 相對路徑、絕對路徑 https://dywang.csie.cyut.edu.tw/dywang/linuxSystem/node31.html

在終端機：

• ./ 代表在此層目錄中
• ../ 代表到上層目錄中
• ~/ 代表到自己的家目錄中
• - 代表到前一個工作目錄中

在網站

• src="img/icon.png" 「本層」img 資料夾中的icon.png
• src="./img/icon.png" 「本層」img 資料夾中的icon.png
• src="../img/icon.png" 「上一層」目錄 img 資料夾中的 icon.png
• src="/img/icon.png" 「根目錄」下的 img 資料夾中的icon.png

appfolder/
|- /static
   |- index.html // 輸入所在位置
   |- /css
      |- snsGroup.css

`/static/css/snsGroup.css`    // 根目錄下 `/static`
`./css/snsGroup.css`          // 同級的 `/css`
`../static/css/snsGroup.css ` // 上一層下的 `/static`

node resolve()

path.relative(from, to)
// `from` <string>
// `to` <string>
// Returns: <string>

path.relative() 方法，根據當前工作目錄，返回 from 到 to 的 "相對路徑"。 如果 from 和 to 為相同路徑，則返回「零長度字符串」。

如果「零長度字符串」作為 from 或 to，則會使用當前工作目錄。

path.resolve([...paths])
// `...paths` <string> 路徑
// Returns: <string>

將給定的 ...paths 解析為絕對路徑。 從右到左處理，每個 path 路徑都被預先加載，直到構造出「絕對路徑」。

如果在處理 path 完，所有給定的段之後，尚未生成絕對路徑，則使用當前工作目錄

除非將路徑解析為根目錄，否則生成的路徑，將標準化，並「刪除尾部斜杠」。

零長度 path 段被忽略。

如果沒有 path 傳遞段，path.resolve() 將返回當前工作目錄的絕對路徑。

node url

var url = require('url'); // 引入 url 模組
// 前面參數 末尾須加 `/` 為最後一層目錄
// 後面參數 前面加 `/` 為根目錄意思


console.info(url.resolve('/one/two/three', 'four'));
// 輸出結果：               /one/two/four

console.info(url.resolve('/one/two/three/', 'four'));
// 輸出結果：               /one/two/three/four

console.info(url.resolve('/one/two/three', '/four'));
// 輸出結果：               /four

console.info(url.resolve('/one/two/three/', '/four'));
// 輸出結果：               /four

console.info(url.resolve('http://www.example.com/one', 'two'));
// 輸出結果：               http://www.example.com/two

console.info(url.resolve('http://www.example.com/one', '/two'));
// 輸出結果：               http://www.example.com/two

console.info(url.resolve('http://www.example.com/one/', 'two'));
// 輸出結果：               http://www.example.com/one/two

console.info(url.resolve('http://www.example.com/one/', '/two'));
// 輸出結果：               http://www.example.com/two

webpack resolve()

https://doc.webpack-china.org/configuration/resolve/

組件中導入別的組件，「使用相对路径」原本的寫法：

import Utility from '../../utilities/utility';

現在，到 config 設定檔中，設定路徑別名：

// alias 別名:
alias: {
 Utilities: path.resolve(__dirname, 'src/utilities/'),
}
// __dirname, 該目錄的絕對路徑
// Utilities 將取代 'src/utilities/' 絕對路徑

回到組件檔案，導入便可改这样寫法：

import Utility from 'Utilities/utility';