Ubuntu环境下执行npm run build时process.env读不到环境变量如何解决

核心原因 #

Vue的主流构建工具（Vue CLI/Vite/原生Webpack）出于安全考虑，默认不会把系统全局环境变量全部注入到前端打包产物中，仅会读取符合约定规则的变量，同时你的环境变量配置操作也存在语法问题。

分步排查 #

• 确认构建工具类型
  • Vue CLI 要求自定义前端环境变量必须加VUE_APP_前缀，才会被注入到客户端侧的process.env对象
  • Vite 要求自定义前端环境变量必须加VITE_前缀，才会被注入到客户端侧的import.meta.env对象（Vite 环境下客户端代码直接读取process.env默认无效）
  • 原生Webpack 未做默认注入，需要手动配置插件实现变量注入
• 检查环境变量设置语法
  Linux Shell 中设置环境变量的命令为小写export，你执行的大写EXPORT API_URL='my.api.url'属于无效语法，仅在部分特殊兼容场景下才会临时生效，且只作用于当前终端会话。
• 检查变量命名规则
  没有加对应前缀的环境变量，只会在构建阶段的Node.js运行时生效，不会被替换到前端静态代码中，所以你的代码里process.env.API_URL始终为undefined，一直走默认的本地地址。

对应解决方案 #

Vue CLI 场景 #

1. 修改配置代码，给变量加VUE_APP_前缀

const apiRoot = process.env.VUE_APP_API_URL || 'http://127.0.0.1:8000'

export default {
    root: apiRoot,
    auth: {
        jwt: {
            create: urljoin(apiRoot, "auth/jwt/login/"),
            refresh: urljoin(apiRoot, "auth/jwt/refresh/"),
        },
        loginPage: "/login",
        me: urljoin(apiRoot,"users/me/")
    }
}

2. 执行打包命令时注入变量即可生效

# 临时生效，单次build有效
VUE_APP_API_URL='https://my.api.url' npm run build

如果需要长期生效，可以将export VUE_APP_API_URL='https://my.api.url'写入对应用户的~/.bashrc或~/.zshrc文件，执行source ~/.bashrc后永久生效。也可以在项目根目录新建.env.production文件，写入VUE_APP_API_URL=https://my.api.url，构建时会自动读取。

Vite 场景 #

将变量名改为VITE_API_URL，代码中读取逻辑改为import.meta.env.VITE_API_URL，其余操作和Vue CLI场景一致。

原生Webpack 场景 #

需要在Webpack配置中通过DefinePlugin手动注入变量：

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
}

配置完成后即可正常读取系统中设置的API_URL环境变量。

内容的提问来源于stack exchange，提问作者Milano