目录
- 1，Vue-CLI（Webpack）
- 2，Vite
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个。参考
以上。
)
