首页vue3 index.html下使用env环境变量

vue3 index.html下使用env环境变量

时间: 2024-03-21 10:38:42 浏览: 193

Vue 3 中也可以通过环境变量来进行配置，与 Vue 2 的方式基本相同。以下是在 index.html 中使用环境变量的方法： 1. 在项目根目录下创建一个名为 `.env` 的文件，或者根据需要创建 `.env.development`、`.env.production`、`.env.test` 等文件。注意：`.env` 文件中的环境变量会在所有环境中生效，而 `.env.local` 文件中的环境变量只在开发环境中生效。 2. 在 `.env` 文件中定义环境变量，以 `VUE_APP_` 开头的变量会被自动注入到 Vue 应用的环境变量中，例如： ``` VUE_APP_API_URL=http://localhost:3000 VUE_APP_DEBUG=true ``` 3. 在 index.html 中使用环境变量，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> </head> <body> <div id="app"></div> <script> const apiUrl = '<%= process.env.VUE_APP_API_URL %>'; const debug = '<%= process.env.VUE_APP_DEBUG %>'; console.log(apiUrl); // http://localhost:3000 console.log(debug); // true </script>  </body> </html> ``` 需要注意的是，在使用环境变量时，需要在模板中使用 `<%= ... %>` 来获取环境变量的值。如果在 Vue 组件中使用环境变量，可以使用 `process.env` 来获取，例如： ```javascript export default { mounted() { console.log(process.env.VUE_APP_API_URL); // http://localhost:3000 console.log(process.env.VUE_APP_DEBUG); // true } } ``` 需要注意的是，如果在 Vue 组件中使用环境变量，需要在 `vue.config.js` 中将 `runtimeCompiler` 设置为 `true`，否则会出现编译错误。例如： ```javascript module.exports = { runtimeCompiler: true } ```

阅读全文