vue3中在index.html使用环境变量
时间: 2023-11-14 18:05:33 浏览: 40
在Vue3中,使用环境变量的方式与Vue2基本相同。以下是在index.html中使用环境变量的步骤:
1. 在项目根目录下创建.env文件,可以创建多个不同环境的配置文件,如.env.development、.env.production等。
2. 在.env文件中定义环境变量,如:VUE_APP_API_URL=http://localhost:8080。
3. 在index.html中使用环境变量,如:`<script>const apiUrl = '<%=process.env.VUE_APP_API_URL%>';</script>`。
需要注意的是,在使用环境变量时,需要在变量名之前加上process.env,否则无法获取到环境变量的值。
另外,需要在项目根目录下创建一个vue.config.js文件来配置Vue CLI,以便让Vue CLI知道如何处理环境变量。在vue.config.js中添加以下代码:
```
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].templateParameters = {
'BASE_URL': process.env.BASE_URL,
'VUE_APP_API_URL': process.env.VUE_APP_API_URL
};
return args;
});
}
};
```
这里的代码是让Vue CLI在处理index.html时,将环境变量注入到模板中。然后在index.html中通过模板变量来使用环境变量。
以上就是在Vue3中在index.html中使用环境变量的方法。