在vite项目中title用环境变量-前端小菜鸟

在vite项目中title用环境变量

fanfan

2024-06-27 / 0 评论 / 0 点赞 / 90 阅读 / 0 字

06/27

温馨提示：

本文最后更新于2024-06-27，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

Vite 本身支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

vite-env.d.ts

interface ImportMetaEnv {
    readonly VITE_APP_BASE_API: string;
    readonly VITE_COMPANY_NAME: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

.env.development

# 【开发环境】
NODE_ENV = development

# Api地址
VITE_APP_BASE_API = 'http://127.0.0.1:8083'
# 公司简称
VITE_COMPANY_NAME = 'xxxx'

index.html

<!doctype html>
<html lang="zh">
	<head>
	    <meta charset="UTF-8"/>
	    <link rel="icon" href="/favicon.ico"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	    <title>%VITE_COMPANY_NAME%</title>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>

注意点：如果import.meta.env上不存在某个属性变量名，例如：VITE_NAME
在html，会表现为被忽略，而不进行替换。
但是在js，会查找不到，会被替换为 undefined。