[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