目录
1,Vue-CLI(Webpack)
html
<!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
html
<!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>
编译结果
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个。参考
以上。