1、环境变量
1.1、环境模式
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载,但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载,但会被 git 忽略
1.2、默认环境变量
- import.meta.env.MODE: {string} 应用运行的模式
- import.meta.env.BASE_URL: {string} 部署应用时的基本 URL
- import.meta.env.PROD: {boolean} 应用是否运行在生产环境
- import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)
1.3、应用环境变量
.env文件:所有环境下都会加载
.env.development文件:开发环境
.env.production文件:生产环境
可以通过 import.meta.env.MODE === 'development' 进行判断
VITE_APP_NAME = dist-icon
注意:变量名称必须VITE_开头
1.4、使用环境变量
// 判断
const isProd = import.meta.env.MODE === 'production'
// 读取
const appName = import.meta.env.VITE_APP_NAME
在项目中,根据项目业务和情况来配置环境变量。.env.development一般为默认,非测试或特定情况可不用配置
2、自定义环境变量
如果使用自定义配置环境变量,import.meta.env.MODE中的运行环境将变成自定义的环境,比如:import.meta.env.MODE:hbjt。不再是用development或production来区分开发环境和生产环境。要想在自定义环境变量中控制是开发环境还是生产环境,可以定义.env.projectName(生产环境)、.env.projectName-dev(开发环境)。自定义变量 NODE_ENV = development 或者 ODE_ENV = production 来控制是否是生产环境
2.1、命名环境变量
.env.projectName(项目名称)
一般应用场景:控制同一套框架下根据项目打包不同的业务、特定环境下的变量或环境地址
注意:.env文件中存储默认的环境变量
2.2、使用环境变量
dev:启动本地环境项目。
serve:projectName:启动指定环境的本地项目
"scripts": {
"dev": "vite",
"serve:projectName": "vite --mode projectName",
"build": "vue-tsc && vite build",
"build:projectName": "vue-tsc && vite build --mode projectName",
"preview": "vite preview",
"lint:fix": "eslint --ext .ts,.tsx,.vue --fix ."
}
启动指定环境项目后,才可以访问到环境变量,否则默认取.env文件下环境变量
--mode projectName(项目名称-可自行定义)
3、vite中使用环境变量
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import viteLegacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
const appName = env.VITE_APP_NAME
console.log('env', env)
return {
plugins: [
vue(),
VueSetupExtend(),
AutoImport({
resolvers: [VantResolver()]
}),
Components({
resolvers: [VantResolver()]
}),
viteLegacyPlugin({
targets: ['chrome 52', 'ie >= 11'], // 需要兼容的目标列表,可以设置多个
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
})
],
resolve: {
// 设置快捷指向
alias: {
'@': resolve(__dirname, './src')
}
},
build: {
// 指定输出路径
outDir: appName
},
base: BASE_URL,
server: {
port: 8086,
host: '0.0.0.0',
open: true, // 启动服务是否自动打开浏览器
cors: true, // 跨域
proxy: {
'/webspiderweb': {
target: '',
changeOrigin: true,
secure: false
}
}
},
define: {
'process.env': {
VITE_APP_NAME: env.VITE_APP_NAME,
VITE_APP_BASE_URL: env.VITE_APP_BASE_URL
}
}
}
})
define:将全局变量注入到代码中
process.env:用于访问运行时的环境变量
使用:import.meta.env.VITE_APP_NAME 或 process.env.VITE_APP_NAME