如何在 Vue 应用程序的 index.html 文件中使用环境变量？答案

【问题标题】：How to use Env Variables in a Vue app's index.html file?如何在 Vue 应用程序的 index.html 文件中使用环境变量？
【发布时间】：2022-10-17 12:07:53
【问题描述】：

我有一个索引文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title For This Document -->
    <title> Html Template</title>
    <!-- Favicon For This Document -->
    <link rel="shortcut icon" href="src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
    <!-- Bootstrap 5 Css -->
    <link rel="stylesheet" href="src/assets/css/bootstrap.5.1.1.min.css">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- FlatIcon Css -->
    <link rel="stylesheet" href="src/assets/fonts/flaticon.css">

    <!-- Slick Slider Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/slick.css">
    <!--  Ui Tabs Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/jquery-ui.min.css">
    <!-- Magnific-popup Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/magnific-popup.css">
    <!-- Nice Select Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/nice-select.v1.0.css">
    <!-- Animate Css -->
    <link rel="stylesheet" href="src/assets/css/plugin/animate.css">
    <!-- Style Css -->
    <link rel="stylesheet" href="src/assets/css/style.css">

</head>

<body>
<!--===scroll bottom to top===-->
<a href="#0" class="scrollToTop"><i class="flaticon-up-arrow"></i></a>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->

<script src="src/assets/js/jquery.v3.6.0.min.js"></script> <!-- Popper v2.9.3 Js -->
<script src="src/assets/js/popper.v2.9.3.min.js"></script> <!-- Bootstrap v5.1.1 js -->
<script src="src/assets/js/bootstrap.v5.1.1.min.js"></script> <!-- jquery ui js -->
<script src="src/assets/js/plugin/jquery-ui.min.js"></script> <!-- Parallax js -->
<script src="src/assets/js/plugin/jarallax.min.js"></script> <!-- Isotope js -->
<script src="src/assets/js/plugin/isotope.js"></script> <!-- Slick Slider Js -->
<script src="src/assets/js/plugin/slick.min.js"></script> <!-- magnific-popup v2.3.4 Js -->
<script src="src/assets/js/plugin/jquery.magnific-popup.min.js"></script> <!-- Tweenmax v2.3.4 Js -->
<script src="src/assets/js/plugin/tweenMax.min.js"></script> <!-- Nice Select Js -->
<script src="src/assets/js/plugin/nice-select.v1.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/wow.v1.3.0.min.js"></script> <!-- Wow js -->
<script src="src/assets/js/plugin/jquery.countdown.min.js"></script> <!-- Main js -->
<script src="src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="/src/main.js"></script>
</body>

</html>

我有一个 Vue 应用程序：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'


const app = createApp(App)

app.use(router)
app.config.globalProperties.axios = axios
app.mount('#app')

而且我使用的是 vite，而不是 CLI。

我想在 .env 文件的索引文件中使用我的 env 变量（而不是在 js 脚本标签中）如何实现它？我阅读了 vue 文档，但它没有任何示例如何在 html 代码中使用它。我在这里尝试了“import.meta.env”：

<div id="app">{{import.meta.env.DOMAIN_NAME}}</div>

我尝试在这里使用它：

<meta name="DOMAIN_NAME" value={import.meta.env.DOMAIN_NAME}>

，但它没有像这样工作......我认为它至少是不正确的语法......

【问题讨论】：

这回答了你的问题了吗？ Vue js project not loading .env variables

标签： javascript html vue.js

【解决方案1】：

我想你在找什么：是如何修改元数据（头部部分的标签），我建议你使用 vue-meta 插件，它允许你使用 META DOMAIN_NAME 标签，然后在你的 main.js 中你可以定义：

Vue.use(VueMeta, {
  DOMAIN_NAME: VUE_APP_DOMAIN_NAME
})

一切都在这里得到很好的解释：https://www.digitalocean.com/community/tutorials/vuejs-vue-meta

否则我认为您的代码中有语法错误，正确的语法是

<meta name="DOMAIN_NAME" value="<%= import.meta.env.DOMAIN_NAME %>">

请这个由 Vuejs 生成的 index.html 文件

【讨论】：

并不真地。可能它现在可以为这个特定任务解决我的问题，但在全球范围内，我想学习如何在 html 代码中使用任何 env 变量/不仅是元数据。无论如何感谢您的帮助！
试试这个语法然后 <%= import.meta.env.DOMAIN_NAME %> <meta name="DOMAIN_NAME" value="<%= import.meta.env.DOMAIN_NAME %>">
``` <div><%= import.meta.env.DOMAIN_NAME %></div> ``` 给出以下 vue 错误：无法解析 HTML； parse5 错误代码 invalid-first-character-of-tag-name 并指向 % 符号