在 vue-cli 3 初始化的專案根目錄下面：和 src 同級有一個 public 目錄

然後我們把一個檔案 a.png 放置到它裡面，不管打包還是 dev 起服務的時候，可以通過根目錄訪問

比如 build 的時候，最終 dist 目錄的根目錄就會出現一個 a.png。

所以很多人會把一些需要在根目錄訪問的檔案多放置到它裡面去

@vue/cli-service/lib/config/app.js 檔案中有一段：

第一步：通過 api.resolve 獲取當前 public 的目錄：

// copy static assets in public/
const publicDir = api.resolve('public')
 

判斷條件：比如最常見的是通過 fs.existsSync 來判斷目錄是否存在：

const fs = require('fs')
fs.existsSync(publicDir)

後面其實就和之前 2 版本里面的拷貝 src 到 dist 打包類似：

定義一個 copy 的 plugin，然後呼叫外掛 copy-webpack-plugin，傳入一些引數：

• from 拷貝的源
• to 拷貝的目的地
• ignore 忽略一些檔案

注意：這裡的 to 的值 outputDir:

const outputDir = api.resolve(options.outputDir)

webpackConfig
        .plugin('copy')
          .use(require('copy-webpack-plugin'), [[{
            from: publicDir,
            to: outputDir,
            ignore: publicCopyIgnore
          }]])
 

擴充套件閱讀：