首页vite项目如何在index.html获取环境变量

vite项目如何在index.html获取环境变量

时间: 2023-09-14 21:09:22 浏览: 324

在Vite项目中，可以通过在index.html中使用模板字符串来获取环境变量，方法如下： 1. 在项目根目录下，创建一个`.env`文件，并在其中定义环境变量，例如： ``` VITE_APP_TITLE=My Vite Project ``` 2. 在index.html文件中，使用模板字符串来获取环境变量，例如： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>${import.meta.env.VITE_APP_TITLE}</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 在这个例子中，我们使用`${import.meta.env.VITE_APP_TITLE}`来获取环境变量VITE_APP_TITLE的值，并将其设置为页面标题。需要注意的是，在使用模板字符串获取环境变量时，必须要使用`${import.meta.env}`来获取环境变量对象，然后再通过对象的属性来获取具体的环境变量值。另外，需要在index.html文件中添加`<script type="module" src="/src/main.js"></script>`来引入JavaScript入口文件。以上就是在Vite项目中如何在index.html中获取环境变量的方法。

阅读全文