[Vue CLI 3] public 目錄沒用嗎

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

官網的說明如下：https://cli.vuejs.org/zh/guid...

在下列情況下使用：

你需要在構建輸出中指定一個文件的名字。
你有上千個圖片，需要動態引用它們的路徑。
有些庫可能和 webpack 不兼容，這時你除了將其用一個獨立的 <script> 標簽引入沒有別的選擇。

然后我們把一個文件 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 忽略一些文件

更多配置可以參考：https://github.com/webpack-co...

注意：這里的 to 的值 outputDir:

const outputDir = api.resolve(options.outputDir)

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

可以用 vue inspect --plugin copy 查看

/* config.plugin('copy') */
new CopyWebpackPlugin(
  [
    {
      from: '**/public',
      to: '**/dist',
      ignore: [...]
    }
  ]
)

---

熟悉 vue-cli 老版本的同學可能會想，是不是和之前的 static 目錄類似呢？

在 webpack.prod.conf.js 文件中：

用的也是插件 copy-webpack-plugin，只是這里拷貝的是 static 目錄

也支持 3 個參數：

• from
• to
• ignore

const CopyWebpackPlugin = require('copy-webpack-plugin')
// copy custom static assets
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  }
])

但是注意還是有區別的：

最終 build 之后，在 dist 目錄里面不是根文件，默認會放置到 static 里面

配置文件在 config/index.js 里面

assetsSubDirectory: 'static'

擴展閱讀：

• copy-webpack-plugin

來源：https://segmentfault.com/a/1190000016414534