1，Vue-CLI（Webpack）
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<script>
console.log('<%= NODE_ENV %>')
console.log('<%= BASE_URL %>')
console.log('<%= VUE_APP_CONTEXT %>')
</script>
</body>
</html>
在 vue-cli 创建的项目中，
index.html使用环境变量时通过<%= xxx %>。参考除了
VUE_APP_*变量之外，始终可使用的变量有2个NODE_ENV和BASE_URL。参考vue-cli 内置了
htmlWebpackPlugin插件，其中htmlWebpackPlugin.options.title默认取的是package.json中的name字段。
2，Vite
<!DOCTYPE html>
<html lang="en">
<head>
<title>%MODE%</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
console.log('%MODE%')
</script>
<script type="module">
console.log(import.meta.env.MODE)
</script>
</body>
</html>
编译结果
<script>console.log('development')</script>
<script type="module" src="/index.html?html-proxy&index=0.js"></script>
- vite 创建的项目中，
index.html使用环境变量有2种方式：
- 通过
%xxx%（参考） - 在
<script type="module">中通过 es6 的模块语法，使用 Vite 创建的import.meta.env对象上暴露的环境变量。
- 始终可使用的变量有4个。参考
以上。
