构建Docker容器时Eslint报API_PORT全局变量未定义错误求助

问题详情 #

构建Docker容器时，ESLint提示全局变量API_PORT未定义，但该变量在同一组件其他位置使用正常。尝试用// eslint-disable-next-line禁用该行检查无效，已确认前端及Docker配置的.env文件中该变量定义正确，此前功能正常，仅新增该代码段后出现问题，删除该函数代码才能成功构建。

相关代码 #

saveEditSession() {
  // eslint-disable-next-line
  axios.put(`http://${API_HOST}:${API_PORT}/view/sessions/${this.sessionToEdit}`, {
    date: this.editDate,
    time: this.editTime,
    lastModifiedBy: sessionStorage.getItem('user'),
    lastModifiedDate: new Date().toLocaleDateString('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit' }),
  })
    .then(() => {
      this.snackbarText = 'Session updated successfully';
      this.snackbar = true;
      this.fetchSessions(this.currentAppointmentIdToUpdate);
      this.editSessionDialog = false;
    })
    .catch(error => {
      error;
      this.snackbarText = 'Error updating the session';
      this.snackbar = true;
    });
},

错误日志 #

#0 1.120 > vue-cli-service build
#0 1.120
#0 2.510 All browser targets in the browserslist configuration have supported ES module.
#0 2.510 Therefore we don't build two separate bundles for differential loading.
#0 2.510
#0 2.565
#0 2.568 -  Building for production...
#0 66.18  ERROR  Failed to compile with 1 error9:03:29 PM
#0 66.18
#0 66.18 [eslint]
#0 66.18 /app/src/views/ArticulosView.vue
#0 66.18   842:34  error  'API_PORT' is not defined  no-undef
#0 66.18
#0 66.18 ✖ 1 problem (1 error, 0 warnings)
#0 66.18
#0 66.18
#0 66.18 You may use special comments to disable some warnings.
#0 66.18 Use // eslint-disable-next-line to ignore the next line.
#0 66.18 Use /* eslint-disable */ to ignore all warnings in a file.
#0 66.18  ERROR  Error: Build failed with errors.
#0 66.18 Error: Build failed with errors.

解决方案 #

1. 修正Vue环境变量命名规范 #

Vue CLI要求环境变量必须以VUE_APP_为前缀才能在打包时注入到应用中，检查你的.env文件：

# 原错误写法
API_PORT=3000
API_HOST=localhost

# 修正为
VUE_APP_API_PORT=3000
VUE_APP_API_HOST=localhost

然后在代码中使用process.env.VUE_APP_API_PORT和process.env.VUE_APP_API_HOST：

axios.put(`http://${process.env.VUE_APP_API_HOST}:${process.env.VUE_APP_API_PORT}/view/sessions/${this.sessionToEdit}`, { ... })

2. 调整ESLint禁用注释位置 #

当前注释位置和报错行不匹配，将注释移动到模板字符串所在行的上方，或指定具体规则：

axios.put(
  // eslint-disable-next-line no-undef
  `http://${API_HOST}:${API_PORT}/view/sessions/${this.sessionToEdit}`,
  { ... }
)

3. 在ESLint配置中声明全局变量 #

如果API_PORT确实是全局变量，在项目根目录的.eslintrc.js中添加全局变量声明：

module.exports = {
  // 其他配置...
  globals: {
    API_PORT: true,
    API_HOST: true
  }
}

4. 确认Docker构建时.env文件正确加载 #

检查Dockerfile是否复制了.env文件到容器中：

# 在构建阶段复制.env文件
COPY .env .env

或者通过构建参数传递环境变量（需配合Vue CLI的前缀规则）：

docker build --build-arg VUE_APP_API_PORT=3000 --build-arg VUE_APP_API_HOST=localhost .

5. 验证变量注入情况 #

在组件中添加调试代码，确认变量是否被正确注入：

mounted() {
  console.log('API_PORT:', process.env.VUE_APP_API_PORT);
  console.log('API_HOST:', process.env.VUE_APP_API_HOST);
}

本地运行和Docker构建后分别检查输出，确保变量存在。

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