Vue3/Vite构建时如何为SCSS中URL路径添加环境变量前缀

这里有几种实用方案可以解决你遇到的SCSS资源路径前缀问题：

方案1：通过Vite配置注入SCSS全局变量 #

直接在Vite配置里把环境变量注入为SCSS全局变量，所有SCSS文件都能直接使用：

1. 修改vite.config.ts，加载环境变量并传入SCSS预处理器：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  // 加载对应环境的变量
  const env = loadEnv(mode, process.cwd())
  
  return {
    plugins: [vue()],
    css: {
      preprocessorOptions: {
        scss: {
          // 将环境变量注入为SCSS全局变量
          additionalData: `$asset-url: "${env.VITE_ASSET_URL}";`
        }
      }
    }
  }
})

2. 在SCSS文件中直接使用变量拼接路径：

// 注意根据VITE_ASSET_URL是否带结尾斜杠调整路径开头
background-image: url($asset-url + "/images/edit.svg");

方案2：使用CSS自定义属性传递环境变量 #

通过Vue的v-bind把环境变量注入到全局CSS变量中，SCSS里直接引用：

1. 在根组件（比如App.vue）的script setup中定义计算属性：

import { computed } from 'vue'
// 确保环境变量正确加载
const assetUrl = computed(() => import.meta.env.VITE_ASSET_URL)

2. 在根组件的style中定义全局CSS变量：

:root {
  --asset-url: v-bind(assetUrl);
}

3. 在任意SCSS文件中使用这个CSS变量：

background-image: url(var(--asset-url) + "/images/edit.svg");

方案3：组件内导入图片并通过v-bind引用 #

如果是组件内单独使用的图片，可以直接导入后在style中绑定，适合零散资源：

1. 在Vue组件的script中导入图片：

import editSvg from '@/images/edit.svg'

2. 在组件的style中使用：

background-image: url(v-bind(editSvg));

注意事项 #

• 确认VITE_ASSET_URL在对应环境的.env文件中正确定义（比如.env.production）
• 如果VITE_ASSET_URL结尾包含斜杠，记得调整路径拼接时的开头斜杠，避免出现//images/edit.svg这类错误路径

内容的提问来源于stack exchange，提问作者Lukáš Budoš