<script>
mounted(){
const bgImgUrl = this.APP?.options?.login?.bgImgUrl;
bgImgUrl && document.querySelector(':root').style.setProperty('--bgImgUrl', `url(${bgImgUrl})`); //注意：此处必须拼接url，才会重新请求图片
},
</script>
<style lang="less">
@bgImgUrl: var(--bgImgUrl, url("../../../assets/images/bg-img-login.jpg")); //--bgImgUrl不存在则使用默认值
.template-login-tech {
background-image: @bgImgUrl; //此处直接放 var(--bgImgUrl, url("../../../assets/images/bg-img-login.jpg”));也可以
background-size: cover !important;
</style>
拓展：
less转义字符～：
某些时候，当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值，任何 ~"text" 被编译成 CSS 代码后，都将显示为 text。
例如 border-radius 属性，在 CSS 中我们可以使用斜杆 / 来设置属性值，/ 前面的是水平半径，后面的是垂直半径。但是在 Less 中，则不支持使用 / :
.box{ border-radius: 0px 25px 25px 0 / 0 25px 25px 0px; }
上面写法报错SyntaxError，解决办法～转译/ ： border-radius: 0px 25px 25px 0 ~"/" 0 25px 25px 0px;
less calc：
height:calc(~"100% - 50px");
document.qurySelector(); //返回匹配指定选择器的第一个元素
var root = document.querySelector(':root'); //获取根元素，等价于document.documentElement
var node = document.querySelector("#lover"); // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover"); // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover"); // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素