[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’
扩展阅读:
原文地址:https://segmentfault.com/a/1190000016414534
相关推荐
-
技术债务,到底应该怎么还? 框架
2019-8-16
-
Vue.js临时抱佛脚记录 框架
2019-5-3
-
uni-app微信小程序接入人脸核身SDK 框架
2019-8-24
-
微信小程序上传文件小结 框架
2019-6-7
-
Angular学习资料 框架
2019-5-11
-
使用typescript构建Vue应用 框架
2019-9-1
-
前端开发中,滑动展现日志麻烦?这个组件来帮你 框架
2018-12-20
-
vue高级进阶 框架
2019-10-14
-
微信小程序 + 腾讯地图SDK 实现路线规划 框架
2019-3-31
-
微信 jssdk 签名错误 invalid signature 框架
2019-1-13