[Vue CLI 3] public 目录没用吗

2018-09-16 admin

在 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 个参数:

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40405.html

文章标题:[Vue CLI 3] public 目录没用吗

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
回到顶部