—— 分享前端技术,记录生活点滴

Vue根据不同项目环境为图片设置不同的cdn域名

  首先,一个项目中所使用的图片,按照存储空间,大致分为三类:

  1. 保存在自己项目服务器上的图片(项目本地目录static内的图片)
  2. 保存在自己 cdn 服务器上的图片
  3. 第三方的图片(完整地址)

  前两种一般使用相对路径,而第三方图片则为绝对路径,那么在 Vue 项目中,我们如何做最简单的处理,补全不同类型的图片地址,保证其正常显示呢?

  网上有方案是利用 webpack 中的publicPath属性去判断再赋值,是可以实现的,但是对于 Vue2.x 和 Vue3.x 两个大版本,写法上的差异造成维护的不便。那么有没有“懒人模式”呢?我这里的方案也许是个不错的思路——为 Vue 实例注入全局方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 在 src 下创建 utils 工具目录,添加 base-tools.js
let BaseTools = {}
BaseTools.install = function(Vue, options) {
// cdn 域名(开发环境和测试环境使用相同的 cdn 域名)
let cdnDomain = process.env.NODE_ENV === 'production' ?
'https://cdn.xxx.cn' : 'https://cdn.xxx-test.cn';
// 图片路径拼接 cdn 域名
Vue.prototype.$_cPath = function(path) {
const reg = /^(http|ftp|https):\/\//;
const regStatic = /^static\//; // 项目本地目录
if (reg.test(path) || regStatic.test(path) || !path) {
// 如果完整路径、本地目录或者路径为空时,原路返回
return path;
}
// 否则加 cdn 域名返回
return cdnDomain + path;
}
}
export default BaseTools

// main.js 中全局引入,实现方法注册
import BaseTools from '@/utils/base-tools'

  这样,我们就在全局注册了$_cPath方法,在 DOM 中,使用$_cPath方法为img标签设置src即可。

1
<img :src="$_cPath(thumbnail)" />

  以上便是本次分享的内容,希望对你有所帮助,感谢关注阿晋的网络日志。

支付宝打赏 微信打赏

如果觉得我的文章对您有用,请随意赞赏 :)