如何在 uni-app 中, 使用特定前缀的方式引用图片路径
例如:
background-image: url('@images/aaa.png');
这... 怎么做 没见过啊
这两天接到一个小需求, 同事的项目是 uni-app, 他遇到的问题是, 无法在代码中使用自定义前缀处理图片路径, 本地图片路径可以使用, 但是他想要的是网络路径
// no
resolve: {
alias: {
'@images': path.resolve(__dirname, '../src'),
}
},
// yes
resolve: {
alias: {
'@images': 'http://www.xxx.com',
}
},
同事说他试过, 这样写不行的, en..., 我就没再试, 要不显得多不尊重人(毕竟我俩挨着, 我做什么他眼镜一撇就能看到)
他给我说了他想到的解决办法, 就是在 css 中使用 css 变量, 在 js 中使用 js 变量, 我一听, 可以啊, 这是个可行的办法, 但是...
同事嫌弃这种办法麻烦, 问我能不能使用类似自定义变量的方式写
当面答: 可以! 等会我给你搞
私下: 这咋搞...
自定义 loader ?
突然想到一个方法, 在 webpack 编译之前, 我拦截到源代码并进行一个处理不就完了? 可以搞
具体实现逻辑:
自定义一个 loader, 接受源码并处理, 返回源码, 交给 vue-loader 继续进行原本的处理逻辑
开整
- 修改
vue.config.js配置文件
在vue-loader前增加自定义loader处理内容
// 不用使用 configurewebpack, 会和 vue-cli 自带的逻辑起化学反应
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.end()
.use('customLoader')
.loader(path.resolve(__dirname, './customLoader.js'))
.end();
}
- 创建
customLoader.js
使用正则匹配替换vue文件中所有指定格式的图片路径前缀
module.exports = function(source) {
return source.replace(/@images\//g, 'https://www.xxx.com/');
};
如果使用非
vue-cli创建的项目, 请手动下载这两个插件
vue-loadervue-template-compiler
撒花完结...
同事看完效果就懵了, 就这?...
附图
image.png
image.png
