SCSS动态拼接静态资源路径

使用背景：

项目需要上架IRS平台，因此选择使用文件系统。因为IRS平台部署的项目访问资源的时候需要拼接完整路径地址（即：服务器地址+资源文件地址）。

因为正式环境下项目访问的路径存在多种地址（域名正常访问、IRS平台访问等），为了兼容多种情况，SCSS的背景图片也需要动态引入（img-src的JS的动态引入图片就不举例了）

解决方法：

在项目中全局注入一个SCSS变量，比如 $node-path，需要根据build打包的指令来动态改变$node-path的值。于是在Vite.config.ts 中找到关于scss的配置，代码如下

scss: {
          additionalData: `@use "@/assets/styles/element.scss" as *;
          @use "@/assets/styles/theme.scss" as *;

          
          $node-path: '${process.env.VITE_BUILD_ENV == 'isr' ? 'https://xxxxx:18570/node-szzt' : '/node-szzt'}';
          `
        },

可见上述代码比模块文件生成的项目多了一个$node-path，只需要通过打包指令的变量process.env.VITE_BUILD_ENV 来区分打包的环境即可。

在SCSS中使用$node-path 写法

          background: url(#{$node-path}/file/download/文件系统的ID/图片名称.png) no-repeat center center;