[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