先看一下这个插件在webpack的配置
new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ])
to属性对应的值如下config文件的内容
module.exports = { dev: { // Paths assetsSubDirectory: 'static', ... } }
这个配置是表示将static目录下的文件在编译的时候直接拷贝到dist目录下的static目录下面,并且不做任何改变。
有了这一项配置,对于一些可变资源,如网站logo,网站背景,网站主样式等经常变换的资源,可以直接放到static目录中。这样我们就可以在vue开发中如下方式使用:
.info-list li{ position: relative; padding: 10px; font-size: 12px; overflow: hidden; cursor: pointer; background-image:url('/static/images/yj1.png'); background-size:100% 100%; color: #fff; } .info-list li:not(.selected):hover{/*background:#7183D0;*/background-image: url(/static/images/yj2.png);} .info-list li:not(.selected):hover .font_family{color:#fff;} .info-list li:not(.selected):hover .time-num{color:#fff;} .info-list .selected{ background-image: url('/static/images/yj3.png'); color: #fff; }
这样,对于编译后上线的项目,如果logo或者相应主题要变换的话,我们可以直接替换对应图片资源就可以了,而不用重新打包编译。
不过,如果我们使用vue-cli生成的项目的话,这项配置是已经配置好的。但是知道这个插件的作用,能让我们更方便的利用static静态目录。