目录
当 Vue Loader
编译单文件组件中的 <template>
块时,它也会将所有遇到的资源 URL 转换为 webpack
模块请求。
例如,下面的模板代码片段:
<img src="../image.png">
将会被编译成为:
createElement('img', {
attrs: {
src: require('../image.png')
}
})
require('../image.png')
这是一个模块的请求了。
除了 img.src
还有哪些标签的属性,会自动转为模块请求,这是由 Vue Loader
模块的 transformAssetUrls
定义的。
transformAssetUrls
默认值为:
{
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
由于有编译时模块的自动转换,所以下面三行代码的组件效果是一致的:
<img src="../assets/logo.svg"/>
<img src="@/assets/logo.svg"/>
<img :src="require('../assets/logo.svg')"/>
第二行可以@
符号,因为vue.config.js
有关于别名的配置,@
相当于src
。
运行效果:
在style
内联样式中直接引用资源是不行的:
<div style="background-image:url('@/assets/logo.svg')"></div>
url
是css
语法,background-image
属性也不在vue-loader
插件的自动转换匹配之列。
有人是写一个data
变量,但如果这个变量仅是此处使用一次,声明反而迂腐了。可以直接使用require
关键字实现:
<div :style="{backgroundImage:'url('+require('@/assets/logo.svg')+')'}"></div>
这是在template
中的方法,因为可以直接使用require
关键字,如果是在样式文件或在style
代码块内呢,此时require
关键字不得使用?
如果这样使用:
<style lang="less" scoped>
.button1{
background-image:url('@/assets/logo.svg')
}
</style>
是不行的,程序会报编译错误。但如果这样使用:
.button1{
background-image:url('~@/assets/logo.svg');
}
就可以了。仅在路径前端加一个~
符号。在style block
内可以使用,在独立的 style file
中相信也可以使用。
资源 URL 转换会遵循如下规则:
1,如果路径以 @ 开头,会被看作模块依赖,将启用插件加载资源。这时候在 webpack
配置中给 @ 配置 alias
,就很有用了。
2,如果路径以 ~ 开头,其后的部分将会被看作模块依赖。
3,如果路径以 . 开头,将会被看作相对的模块依赖。
4,如果路径是绝对路径,例如 /images/foo.png
,会原样保留。
file-loader
用于实现文件加载,url-loader
用于实现data url
与url
路径的转换控制。
url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.
如果图片大小小于某值,直接以data url
形式内嵌于html
标签内。在vue.config.js
文件中的样例配置为:
configureWebpack: {
...
module:{
rules:[
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]
}
},
如果不想使用data url
这种形式,可以将值改小。
该插件让import、require
发挥作用。在vue.config.js
文件中的典型配置为:
configureWebpack: {
...
module:{
rules:[
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
]
}
},
除了常规配置,深度配置 webpack
有两种方式:
configureWebpack
该节点可以是对象也可以是函数。如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。这是优先选用它的原因。
chainWebpack
这是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
对于 CSS 相关 loader 来说,我们推荐使用 css.loaderOptions
而不是直接链式指定 loader
。这是因为每种 CSS 文件类型都有多个规则,而 css.loaderOptions
可以确保你通过一个地方影响所有的规则。
所以对于之前关于 less
全局变量的实现,有两种方式,以第二种在 css.loaderOptions
中设置为佳。
https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200103
《基于 vue+go 如何快速进行业务迭代?》