如何在Vite的Sass构建流程中引入JavaScript环境变量以动态配置URL？

阿华AIGC实验室

2026-4-8

我完全懂你遇到的麻烦——本地用.test域名、生产用.com域名，硬写Sass里的URL每次切换环境都要改，想用.env里的变量动态注入却一直报未定义错误，确实挺头疼的。咱们一步步来解决这个问题：

第一步：调整环境变量的命名规则

Vite默认只会暴露以VITE_开头的环境变量，所以先把你的.env文件里的变量名改成VITE_APP_URL：

本地开发的.env.local：VITE_APP_URL=https://example.test
生产环境的.env.production：VITE_APP_URL=https://example.com

第二步：修改Vite配置，正确加载环境变量并注入Sass

你之前的配置里硬写了appUrl，而且没有正确把JS变量转换成Sass变量注入。现在更新你的vite.config.js：

import { defineConfig, loadEnv } from "vite"
import laravel from "laravel-vite-plugin"
import path from "path"

export default defineConfig(({ mode }) => {
  // 加载对应环境的.env文件
  const env = loadEnv(mode, process.cwd());
  // 从环境变量中获取APP_URL
  const appUrl = env.VITE_APP_URL;

  return {
    plugins: [
      laravel({
        input: [
          "src/scss/theme-frontend.scss",
        ],
        publicDirectory: "static/build",
      }),
    ],
    build: {
      outDir: "./static/build",
      rollupOptions: {
        output: {
          globals: {
            jquery: "window.$",
          },
        },
      },
    },
    server: {
      host: "0.0.0.0",
      https: {
        key: "./ssl/localhost.key",
        cert: "./ssl/localhost.crt",
      },
      hmr: { host: "localhost" },
    },
    resolve: {
      alias: {
        "~": path.resolve(__dirname, "src"),
        "@scss": path.resolve(__dirname, "src/scss"),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 动态注入Sass变量，同时可以保留全局静态变量的引入
          additionalData: `
            $app-url: "${appUrl}";
            @use "@scss/variables" as *;
          `,
        },
      },
    },
  }
})

第三步：简化你的Sass文件

现在不需要在typography.scss里手动引入variables.scss了（因为已经通过additionalData全局注入），直接使用$app-url变量即可：

@font-face {
  font-family: 'PNR';
  src: url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.woff2') format('woff2'),
       url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.woff') format('woff'),
       url('#{$app-url}/wp-content/themes/theme/static/fonts/pnr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

为什么你之前的方法会失败？

环境变量未正确加载：你之前硬写了appUrl，没有从.env文件读取对应环境的值，导致变量始终是固定的生产地址。
Sass变量注入语法错误：之前的additionalData尝试引入静态的variables.scss，但该文件里的$app-url是硬编码的，没有动态替换；而且如果直接注入变量时没加引号，Sass会把它当成未定义的标识符。
@use的使用顺序问题：Sass要求@use必须放在文件最顶部，如果你在Sass文件里手动引入变量文件，又在additionalData里重复引入，就会导致冲突或加载顺序错误。

现在你可以尝试运行vite build或者本地开发服务，$app-url会根据当前环境自动替换成对应的域名，不用再手动修改啦。

内容来源于stack exchange