在 vue-cli 3 初始化的项目根目录下面：和 src 同级有一个 public 目录
官网的说明如下：
在下列情况下使用：你需要在构建输出中指定一个文件的名字。你有上千个图片，需要动态引用它们的路径。有些库可能和 webpack 不兼容，这时你除了将其用一个独立的
然后我们把一个文件 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 }]]) 可以用 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 assetsnew CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }]) 但是注意还是有区别的：
最终 build 之后，在 dist 目录里面不是根文件，默认会放置到 static 里面
配置文件在 config/index.js 里面
assetsSubDirectory: 'static'
扩展阅读：