使用Vuejs将环境变量插入到索引以外的HTML文件中

在Vue.js中，通常我们会在index.html文件中通过环境变量来插入一些全局配置或者信息。但是，如果你需要在其他HTML文件中也使用环境变量，可以通过以下几种方法来实现：

基础概念

环境变量是在应用程序运行时可以访问的配置信息。它们可以用来存储敏感信息，如API密钥，或者在不同环境（开发、测试、生产）中使用不同的配置。

类型

全局环境变量：在整个应用程序中都可以访问。
局部环境变量：仅在特定的组件或模块中可用。

应用场景

API端点配置：根据不同的环境使用不同的API服务器。
功能开关：控制某些功能的开启或关闭。
用户界面配置：如主题颜色、语言等。

实现方法

Vue CLI 提供了一个简单的方法来处理环境变量。你可以在项目根目录下创建.env文件，并在其中定义环境变量。

步骤：

创建环境变量文件：在项目根目录下创建.env文件，并添加环境变量：
创建环境变量文件：在项目根目录下创建.env文件，并添加环境变量：
在Vue组件中使用：在Vue组件中，你可以通过process.env访问这些变量：
在Vue组件中使用：在Vue组件中，你可以通过process.env访问这些变量：
在其他HTML文件中使用：如果你需要在非index.html的HTML文件中使用环境变量，可以通过以下方法：
- 使用Webpack插件：创建一个自定义的Webpack插件，在构建过程中将环境变量注入到HTML文件中。
- 使用Node.js脚本：编写一个Node.js脚本，在构建之前读取环境变量并替换HTML文件中的占位符。

示例代码：

假设你有一个about.html文件，你想在其中插入环境变量。

about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About</title>
</head>
<body>
  <div id="app">
    API URL: {{apiUrl}}
  </div>
</body>
</html>

Node.js脚本 (inject-env.js):

const fs = require('fs');
const path = require('path');

const envFilePath = path.resolve(__dirname, '.env');
const envConfig = fs.readFileSync(envFilePath, 'utf8')
  .split('\n')
  .reduce((acc, line) => {
    const [key, value] = line.split('=');
    acc[key] = value;
    return acc;
  }, {});

const aboutHtmlPath = path.resolve(__dirname, 'public', 'about.html');
let aboutHtmlContent = fs.readFileSync(aboutHtmlPath, 'utf8');

for (const [key, value] of Object.entries(envConfig)) {
  aboutHtmlContent = aboutHtmlContent.replace(new RegExp(`{{${key}}}`, 'g'), value);
}

fs.writeFileSync(aboutHtmlPath, aboutHtmlContent);

在package.json中添加脚本:

"scripts": {
  "prebuild": "node inject-env.js",
  "build": "vue-cli-service build"
}

遇到的问题及解决方法

如果你在插入环境变量时遇到问题，可能是以下原因：

文件路径错误：确保.env文件和HTML文件的路径正确。
变量未定义：确保环境变量的名称正确，并且以VUE_APP_开头。
构建脚本未运行：确保prebuild脚本在构建之前运行。

解决方法：

检查文件路径和环境变量名称。
确保prebuild脚本正确配置并在构建前执行。

通过以上方法，你可以在Vue.js项目中将环境变量插入到索引以外的HTML文件中。

使用Vuejs将环境变量插入到索引以外的HTML文件中

、、、

我一直在开发一个使用Vue CLI v3构建的项目。* 我知道如何将环境变量插入到Index.html文件中。但是其他的html文件呢？现在我已经包括了oidc和静默刷新功能，我需要在公用文件夹中再包括几个html文件，以便从Identity服务器回调，例如Silent-refresh.html</em

浏览 82提问于2020-08-22得票数 2

1回答

放置模板视图和主干视图代码的最佳实践是什么

、、

我正在使用Backbone.js创建一个ASP.Net MVC3应用程序。我还为视图使用了jQuery模板。

浏览 4提问于2011-09-29得票数 5

回答已采纳

1回答

为环境变量提供vuejs和azuredevops

、

现在，我正在构建一个项目，并使用vuejs作为前端。在本地测试时，创建一个.env.developement和.env.production可以在不同的环境中正常工作，并将正确地显示变量。我现在的问题是在天蓝色的天井里建房子。我指向dist文件夹，很明显，这只是提供有意义的生产变量。在蔚蓝的devops/vue项目中，是否有方法将dev与prod环境变量传递给vuejs以供构建？vue<

浏览 1提问于2020-06-16得票数 0

回答已采纳

1回答

在Google上连接python后端和vue.js前端

、、、、

系统需要在()上加载vue.js应用程序(一些基本的hello world应用程序)。请您帮忙，谢谢您的帮助！)

浏览 3提问于2018-04-15得票数 4

回答已采纳

4回答

Java System.getEnv()

、、、

在mac和Linux CentOS中，我插入了一个新的系统环境变量(即"MYAPP")使用.bashrc & .bash_profile。我甚至重启了我的笔记本电脑(mac)和服务器(linux)。当我使用命令行"env“时，该环境变量显示为正确的值。但不知何故，每次我试图在mac或linux的Java应用程序(桌面应用程序、web应用程序、EJB或servlet以及任何其他ja

浏览 1提问于2012-08-07得票数 2

1回答

VueJS真正的SEO友好404页搜索引擎，如谷歌/ MSN

、、、

</div> </body>当然，如果您单击某个链接，此页面将保持不变，并且所有内容都是通过VueJS将能够将"404未找到“显示为文本，但由于headers已经发送(HTML已经加载)，它将无法向客户端发送404代码。出于同样的<

浏览 3提问于2022-07-24得票数 2

1回答

如何使xampp不显示目录列表？

、

我有一个url "678.345.45.23/ login“来访问我的登录页面。我已经将我的login.php放在了htdocs/trial/login/login.php中。因此，如果我输入"678.345.45.23/trial/ login“，它将列出登录文件夹中的所有文件名。我不想显示文件名和文件夹名。如果我把任何文件夹名放在u

浏览 0提问于2018-09-04得票数 1

2回答

烧瓶蓝图不能覆盖静态路径

、、

我正在尝试使用水瓶蓝图，以服务多页网页应用程序。Webapp结构：烧瓶结构： client/ static/<script src=/static/js/index.js></script></body></html> 然后我运行这个应用程序并重定向

浏览 0提问于2019-08-25得票数 0

回答已采纳

1回答

将一个数组添加到另一个没有索引vuejs的数组中

、、

我正在用Vuejs创建一个调查应用程序。我有这个函数将检查过的答案发布到我的数据库中： var, answerId]; console.log(this.finalArray);我想要的是在不创建新索引的</e

浏览 9提问于2020-05-05得票数 0

回答已采纳

2回答

运行生成后，Vue CLI中缺少.env

、、、

我正在使用Vue CLI3构建一个应用程序。我已经在我的项目中包含了.env，一切都运行得很好。但是，当我通过npm run build构建用于生产的应用程序时，我的dist文件夹中没有.env文件，因此我无法在生产服务器中更改我的环境变量。有什么解决方案吗?还是很好？

浏览 198提问于2019-12-21得票数 1

回答已采纳

1回答

如何在VueJS中呈现要在index.html上使用的模板

我们有一个带有Webpacker的Rails应用程序，它只提供初始的HTML文件，之后客户端将下载所有的文件(包括vue .js和.css)。我们的问题是，我们想要在html上显示一些初始的东西，这样用户就会感觉到网站已经加载了。此逻辑位于主vuejs组件中。有没有一种方法可以离线渲染它，这样它就可以轻松地嵌入到我们的索引页面上？

浏览 1提问于2018-12-03得票数 0

2回答

如何为从NodeJS构建的另一个repos文件提供服务？

、、

我需要使用服务器为Vue接口提供构建的文件，并且不知道如何继续.关于如何解决这个问题，我有两个想法：第二个似乎更干净，但我不知道如何开始处理这个问题。有人能提供一些关于更好的方法和我如何开始的想法吗？

浏览 6提问于2017-12-08得票数 0

回答已采纳

4回答

‘后的地址栏内容是否对HTML签名并插入值？

、

我正在从某个页面重定向到index.html。使用地址栏中的以下地址将页面重定向到索引：http://localhost/index.html?page.html 如何读取?签名后的值并将其(page.html)插入到index.html文件中？

浏览 0提问于2012-03-02得票数 6

回答已采纳

1回答

除了vuejs中的value属性之外，我还可以绑定到其他输入属性吗？

、、、

我刚开始使用前端javascript框架。目前正在处理一段代码，如果可以将value以外的其他输入属性绑定到v-model in VueJS，我很好奇。我的意思是：<input type="checkbox" name="labels[]" id="label_{{$label->id}}" value=&qu

浏览 0提问于2018-03-20得票数 1

回答已采纳

1回答

使用sphnix实现搜索功能

、、

我需要为我的project.after实现搜索功能，探索一些全文搜索引擎。我发现狮身人面像搜索适合我的项目。在一些了解之后，我发现我需要把要搜索的数据输入到数据库中，然后索引器从数据库中提取数据并构建indexes.after，搜索器使用该索引来回答在我的Ubuntu机器上安装它有困难的query.am，之后我不知道如何继续，我没有找到任何示例项目来寻找用户给出的关键字的<

浏览 2提问于2013-12-03得票数 0

2回答

VueJS单页应用程序访问

、、、

我正在使用Vue构建SPA，并将其与nodejs一起服务，并将其包装在码头容器中。这就是问题所在，我试图坚持使用来进行配置，它说要保存在env文件中。 VueJS为配置文件夹中的不同环境提供了信任。但是，根据12 factor app配置不应该是基于环境的文件。在一个12因子应用程序中，env vars是粒状控件，每个控件都与其他env var完全正交.它们从不作为“环境”分组，而

浏览 1提问于2018-02-07得票数 1

1回答

如何动态填充Postman附件中的环境变量值

我正在使用Postman进行一系列API调用。我需要在API request #2中使用API response #1中的值，诀窍是该值必须放在文件附件中。我可以毫不费力地从response #1获取事务ID并将其放入环境变量，并且我知道如何在后续调用中使用环境变量，方法是将变量放入主体中作为form-data：我正在努力弄清楚的是如何获取我的

浏览 0提问于2021-09-13得票数 0

2回答

在多个页面中插入一个动态标题？

、、

目前，我正在使用jquery.ba-hashchange.min.js和dynamicpage.js动态地从索引页面加载内容，从而将头保存在一个文件中。但是，jquery.ba-hashchange.min.js正在干扰我的内容中的其他jQuery。是否有方法将标题插入到页面中，而不是使用标头将内容插入索引页？请注意，我正在<

浏览 5提问于2014-05-07得票数 0

1回答

在vuejs应用程序中使用环境变量

、、、

我阅读了这个关于如何在vuejs中使用环境变量的。我已经安装了本地.env.local文件并安装了dotenv我有一个配置文件 AUTH_AUTHORITY: process.env.VUE_APP_AUTH_AUTHORITY,这个在我的本地机器上工作。在开发准备好构建之后，我希

浏览 1提问于2018-08-13得票数 3

回答已采纳

2回答

在作业描述中使用环境变量

我正在尝试用一个全局环境变量来动态设置一个工作描述。但我不能使用$MYVAR或${MYVAR}。谢谢！

浏览 4提问于2015-12-03得票数 5

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用Vuejs将环境变量插入到索引以外的HTML文件中

基础概念

相关优势

类型

应用场景

实现方法

步骤：

示例代码：

遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐