Vue配置文件中的publicPath詳解

一、publicPath是什麼

在Vue項目中，默認情況下所有靜態資源的URL都是以”/”開頭的相關路徑，而publicPath實際上就是這些相關路徑的前綴。比如在默認的情況下，webpack打包出來的bundle.js文件的URL路徑為”/bundle.js”。如果我們在項目根目錄的vue.config.js中添加了如下代碼：

module.exports = {
  publicPath: '/myproject/'
}

那麼在所有相關資源的URL路徑前面就會被添加上”/myproject”，例如bundle.js文件的URL路徑就變成了”/myproject/bundle.js”。這個參數的設定不僅影響了資源的引用，還可以影響到發布後的文件夾路徑，包括css、js以及img等靜態文件夾的路徑。

二、publicPath的使用場景

publicPath常用於生產環境的部署。當我們將Vue項目打包後，需要將相關文件發布到伺服器上，如果publicPath未設置，那麼打包生成的文件默認指向根目錄下。而實際情況中，根目錄下可能有其他文件或者目錄結構，不方便將靜態資源放置在根目錄下。為了解決這個問題，我們可以在vue.config.js文件中設定publicPath參數的值，來支持修改發布後的路徑。

三、如何使用publicPath

Vue官方提供了兩種方法來指定publicPath路徑：

1. 直接在vue.config.js中設定publicPath

module.exports = {
  publicPath: '/myproject/'
}

在vue.config.js中直接指定publicPath路徑，將使得所有的靜態資源URL路徑都添加上給定的前綴。

2. 使用環境變數

使用環境變數可以避免我們在開發和生產環境中切換時需要來回修改publicPath的值。

在創建Vue項目時，我們可以在命令行中添加參數來指定publicPath的值：

vue create myproject --publicPath /myproject/

這樣，在打包時，Vue會自動使用這個值。如果我們需要修改publicPath參數的值，我們可以通過指定環境變數的方式進行修改：

// 使用 Unix-style 語法
PUBLIC_URL=/myproject/ npm run build

// 使用 PowerShell
$env:PUBLIC_URL="/myproject/"; npm run build

四、publicPath參數的重要性

publicPath參數對於Vue項目的很多方面都非常重要，包括生產環境的部署、DevServer的訪問路徑、打包生成的文件路徑等等。如果缺失或者設定錯誤，將會導致一系列的問題。特別是在生產環境部署時，我們必須保證publicPath參數正確設置，否則訪問資源或出現Class Not Found等情況都有可能出現。