Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

news/2024/11/15 14:26:34/

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

问题背景

今天在导报项目的时候遇到一个问题问题:在开发环境中一切正常,但在打包后的生产环境中,某些环境变量(如 VUE_APP_BASE_API)无法正确读取,导致出现 VUE_APP_BASE_API 不存在 的错误。

请添加图片描述

下面就解决这个问题,让环境变量在打包后的生产环境中能够正常使用,进行了进一步的思考衍生

知识储备

要解决上面的问题需要,了解一下下面的内容

在开发 Vue 项目的过程中,使用环境变量来管理不同环境下的配置(例如 API 地址、密钥等)。

文件.env

开发环境生产环境公用的一些配置

//.env
VUE_APP_NAME=red润
VUE_APP_BASE_API=/api2
VUE_APP_API_BASE_URL=https://本地开发地址.com

文件.env.productioin

生产环境单独使用的配置,如果和.env内容相同,.env.production将会覆盖.env里面的内容

VUE_APP_API_BASE_URL=https://线上域名.com
VUE_APP_BASE_API=/api

在 Vue CLI 中,环境变量的加载是有优先级的。当你运行构建命令时(如 npm run build),Vue CLI 会按以下顺序加载环境变量:

  1. .env:基础的环境变量文件,通常包含开发、生产和测试等环境共享的变量。
  2. .env.local:如果存在,它会覆盖 .env 中的变量,适用于本地开发环境(注意:此文件通常不会提交到版本控制中)。
  3. .env.development.env.production:这些文件用于特定环境(开发环境、生产环境等),会覆盖 .env.env.local 中的相同变量。
  4. .env.development.local.env.production.local:这些是针对特定环境的本地配置文件,会覆盖上述所有文件中的变量。

所以,在你的情况下,如果 .env.production.env 中有相同的环境变量,process.env.VUE_APP_BASE_API 的值会使用 .env.production 中的值,而 .env 中的配置会被覆盖。

问题描述

在本地开发时,使用以下代码来引用环境变量:

const version = `${process.env.VUE_APP_BASE_API}`;

在开发环境下,process.env.VUE_APP_BASE_API 正常返回预期的值。

但是,当进行打包构建时,线上环境却出现了 VUE_APP_BASE_API 不存在 的错误,导致 API 请求无法正常发起。

请添加图片描述

问题原因

这个问题通常发生在 Vue CLI 构建项目时,它会自动根据不同环境加载不同的 .env 文件。如果 .env.production.env 中没有正确配置环境变量,或者构建过程没有正确读取到这些变量,线上就无法获取到相应的环境变量。

解决方案

以下是几种常见的解决方法,我们可以逐一排查。

1. 确保 .env 文件配置正确

首先,确保你已经在项目根目录下创建了 .env.env.production 文件,并且在文件中定义了所需要的环境变量。例如:

VUE_APP_BASE_API=https://your-api-endpoint.com

注意:Vue CLI 会自动加载以 VUE_APP_ 为前缀的环境变量。如果你的环境变量没有以 VUE_APP_ 开头,它将不会被嵌入到最终的构建中。

2. 清除缓存并重新打包(这是我的解决方案ok)

有时候旧的构建缓存可能导致环境变量没有被更新。为了确保环境变量被正确加载,可以尝试在打包时加上 --no-cache 标志:

enpm run build --no-cache

这将确保构建过程从头开始,而不会使用任何缓存文件。

3. 打包时检查环境变量

你可以在构建过程中使用 console.log(process.env) 来检查环境变量是否正确加载。可以在 src/main.jssrc/App.vue 中添加以下代码来调试:

console.log(process.env);  // 打印所有环境变量

这将帮助你确认构建后的代码中是否包含了你设置的 VUE_APP_BASE_API 变量。

webpack__DefinePlugin__100">4. 使用 webpackDefinePlugin 明确注入环境变量(究极方案)

如果以上方法都没有解决问题,可以尝试通过 webpackDefinePlugin 来显式地将环境变量注入到构建代码中:

// vue.config.js
const webpack = require('webpack');module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({'process.env.VUE_APP_BASE_API': JSON.stringify(process.env.VUE_APP_BASE_API)})]}
}

这样,VUE_APP_BASE_API 将被直接注入到打包后的代码中,确保在生产环境中能够正常使用。

webpack.DefinePlugin 用于在打包时,静态地将代码中的指定字符串替换为给定的值。它会查找代码中的匹配项,并将其替换为我们提供的值。这是一种预处理机制,允许你在构建时动态替换代码中的常量值。

  • process.env 与环境变量

在 Node.js 中,process.env 是一个包含所有环境变量的对象。在 Vue CLI 中,process.env 主要用于访问不同的环境变量。像 VUE_APP_BASE_API 这样的变量通常在 .env 文件中定义,并通过 process.env.VUE_APP_BASE_API 来访问。

然而,process.env 只是 Node.js 的一个对象,Webpack 在构建过程中并不会自动注入这些环境变量。因此,使用 DefinePlugin 插件,可以手动将这些环境变量注入到构建代码中。

  • JSON.stringify() 的作用

webpack.DefinePlugin 中,值需要以字符串的形式提供,因为 Webpack 会在构建时进行替换。直接传递 JavaScript 的对象或变量是无效的,因此必须使用 JSON.stringify()process.env.VUE_APP_BASE_API 的值转换为一个字符串,这样 Webpack 才能正确地将它嵌入到构建后的代码中。

例如,如果 .env 中的 VUE_APP_BASE_APIhttps://api.example.comJSON.stringify() 会将其转换为字符串 'https://api.example.com',然后 Webpack 会将代码中所有 process.env.VUE_APP_BASE_API 的引用替换为这个字符串。

  • 如何工作

通过这种方式,Webpack 会在构建时查找代码中所有的 process.env.VUE_APP_BASE_API,并将其替换为 https://api.example.com(或其他 .env 文件中定义的值)。

举个例子,假设你在 Vue 组件中使用以下代码:

const apiUrl = process.env.VUE_APP_BASE_API;

在构建时,Webpack 会将 process.env.VUE_APP_BASE_API 替换为你在 webpack.DefinePlugin 中定义的值,即:

const apiUrl = 'https://api.example.com';
5. 检查部署环境的环境变量配置

如果你使用 CI/CD 进行自动化构建,确保部署环境(例如 Docker、云平台等)中也已经配置了正确的环境变量。在一些部署平台中,你可能需要手动设置环境变量,以便构建过程能正确读取。

总结

通过上述方法,我们可以有效地解决 Vue 项目在打包后,环境变量丢失的问题。我们解决思路如下:

  1. 确保 .env 文件正确配置。
  2. 清除缓存并重新打包。
  3. 使用 console.log(process.env) 检查环境变量是否正常加载。
  4. 使用 webpack DefinePlugin 明确注入环境变量。
  5. 确保部署环境配置了正确的环境变量。

Happy coding!

😄


http://www.ppmy.cn/news/1547215.html

相关文章

多媒体信息检索

文章目录 一、绪论二、文本检索 (Text Retrieval)(一) 索引1.倒排索引2.TF-IDF (二) 信息检索模型 (IR模型,Information Retrieval)1.布尔模型 (Boolean模型)(1)扩展的布尔模型 (两个词)(2)P-Norm模型 (多个词) 2.向量空间模型 (Vector Space Model,VSM)…

【2025最新计算机毕业设计】基于SpringBoot+Vue电脑在线装机指南教程网站【源码+文档】

作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

text2vec-large-chinese 模型 -- 部署及推理

魔搭下载地址https://www.modelscope.cn/models/Jerry0/text2vec-large-chinese 1. 推理代码 from sentence_transformers import SentenceTransformer import torch import numpy as np from scipy.spatial.distance import cosinedevice torch.device("cuda")# …

NeurIPS2024论文分享┆HyperPrism:一种针对非独立同分布数据和时变通信链路的分布式机器学习自适应非线性聚合框架

简介 本推文详细介绍了上海电力大学杜海舟教授团队发表在人工智能顶级学术会议NeurIPS 2024上的最新研究成果《HyperPrism: An Adaptive Non-linear Aggregation Framework for Distributed Machine Learning over Non-IID Data and Time-varying Communication Links》&#…

《硬件架构的艺术》笔记(一):亚稳态

同步系统中如果数据和时钟满足建立保持时间的要求,不会发生亚稳态(meastable)。 异步系统中数据和时钟关系不固定,可能违反建立保持时间,就会输出介于两个有效状态之间的中间级电平,且无法确定停留在中间状…

Spring Boot框架:网上商城开发新选择

2 相关技术 2.1 SpringBoot框架介绍 Spring Boot是一种不需要代码生成的一种框架,并且可以不需要配置任何的XML文件就可以,因为Spring Boot里面自带了很多接口,只需要配置不同的接口就会自动的应用并且识别需要的依赖,在配置方面非…

node.js实现批量修改git项目的数据源

在项目开发过程中,大型项目会分块,每一块都会拥有一个git地址,当想切换git地址的域名时,如果手动一个一个去修改对我们来说费时费力的事情,如果能有一个脚本,一次性批量修改,可以给大家节省很多…

Vuex vs Pinia:新一代Vue状态管理方案对比

引言 随着Vue生态系统的不断发展,状态管理已经成为现代Vue应用程序中不可或缺的一部分。Vuex作为Vue官方的状态管理方案,一直是开发者的首选。然而,随着Pinia的出现,为Vue开发者带来了新的选择。本文将深入对比这两个状态管理方案…