在项目开发中,通常来说,不同的环境会有不同的请求api接口,这就需要修改配置,才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值。
# 环境变量文件(.env)
在项目根目录(和src同级)中创建三个文件:
.env.development
# 【开发环境】
NODE_ENV = development
# base api
VITE_APP_BASE_API = '/api'
.env.staging
# 【测试环境】
NODE_ENV = staging
# base api
VITE_APP_BASE_API = '/api'
.env.production
# 【生产环境】
NODE_ENV = production
# base api
VITE_APP_BASE_API = '/api'
# 环境变量定义与获取
定义:变量以 VITE_XXX
进行定义。如果想自定义 env 变量的前缀,可以在vite.config.js里配置 envPrefix。
获取:import.meta.env.VITE_XXX
和
process.env.VITE_XXX
通常使用 import.meta.env.VITE_XXX
可以获取到环境变量,而vite.config.js除外。文章来源:https://www.toymoban.com/news/detail-447436.html
在vite.config.js中自定义环境变量前缀及获取环境变量的配置如下:文章来源地址https://www.toymoban.com/news/detail-447436.html
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");
export default defineConfig(({command, mode }) => {
const env = loadEnv(mode, process.cwd())
console.log(env.VITE_APP_BASE_API) // 获取环境变量
return {
plugins: [vue()],
envPrefix: ['VITE', 'VUE'], // 环境变量前缀,默认只会暴露VITE开头变量,定义后可暴露VUE开头变量
define: {
'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API),
},
}
})
# package.json多环境配置
"scripts": {
"dev": "vite", // 开发环境
"serve": "vite preview", // 本地预览
"staging": "vite build --mode staging", // 测试环境打包
"build": "vite build", // 生产环境打包
},
到了这里,关于Vue3+vite环境变量配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!