我有一个索引文件：
<!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变量（而不是在js脚本标记中）从.env文件如何实现它？我读了vue文档，但它没有任何例子如何在html代码中使用它。我尝试了“import. meta.env”这里：
<div id="app">{{import.meta.env.DOMAIN_NAME}}</div>我试着在这里使用它：
<meta name="DOMAIN_NAME" value={import.meta.env.DOMAIN_NAME}>，但它没有这样工作...我认为这是不正确的语法至少...
2条答案
按热度按时间kgsdhlau1#
我想你正在寻找的是：是如何修改元数据（头部分的标签），我建议你使用vue-meta插件，它将允许你的META DOMAIN_NAME标签，然后在你的main.js中你可以定义：
一切都在这里解释得很好：https://www.digitalocean.com/community/tutorials/vuejs-vue-meta
否则我认为你的代码中有语法错误，正确的语法是
请输入Vuejs生成的index.html文件
xxb16uws2#
Vite 4.2.0中添加了替换环境变量，请参见https://vitejs.dev/guide/env-and-mode.html#html-env-replacement
将以下内容添加到
.env/.env.dev/...文件中：或将以下内容添加到您的
vite.conf.js然后你可以在
index.html中替换它，如下所示：你必须给你的环境变量加上前缀 VITE_，这样它们才能在你的代码中公开。