03- 区分开发环境和生产环境（学习vite打包工具的笔记）

一、区分开发环境和生产环境

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//策略模式
const envResolver = {
    "build": ()=>Object.assign({}, baseConfig, 生产环境的vite配置),
    "serve": ()=>Object.assign({}, baseConfig,开发环境的vite配置)
}

// https://vitejs.dev/config/
export default defineConfig(({command："build" | "serve"})=>{
    return envResolver[command]();
})

二、环境变量配置

1.什么是环境变量

环境变量: 会根据当前的代码环境产生值的变化的变量就叫做环境变量

2.怎么去读取.env文件的 (配置完为什么会生效)

1.vite内置了dotenv这个第三方库

2.dotenv会自动读取.env文件

3.解析这个文件中的对应环境变量 并将其注入到process.env对象下(但是vite考虑到和其他配置的

一些冲突问题, 它不会直接注入到process对象下)

3.如何配置环境变量

创建环境变量

//1.创建文件
.env: 所有环境都需要用到的环境变量
.env.development: 开发环境需要用到的环境变量(默认情况下vite将我们的开发环境取名为development)
.env.production: 生产环境需要用到的环境变量(默认情况下vite将我们的生产环境取名为production)

//2.文件定义内容格式(注意:默认必须VITE_开头)
VITE_JIRONGLIANG = 你好

//如果想要自定义环境变量开头需要在配置项中添加envPrefix属性
export default defineConfig({
    envPrefix: "ENV_"
})
ENV_JIRONGLIANG = 你好

使用环境变量

//客户端
1.在客户端使用(也就是vue文件中)vite会将对应的环境变量注入到import.meta.env里去
console.log(import.meta.env)

//服务端
1.在服务端使用(具体一点就是配置文件中)loadEnv方法
// 第一个参数是.env.xxxx名字相匹配 确认是那个文件
// 如：yarn dev --mode devlop
// 就是匹配.env.devlop文件

// 第二个参数不是必须要使用process.cwd(), 是当前env所在的目录路径

// 第三个参数是.env文件名 默认就是.env
export default defineConfig(({command,mode})=>{
	//console.log(command,"区分环境运行的命令")
	//console.log(mode,"细分的环境可自定义")
	const env = loadEnv(mode, process.cwd(), "");
	return {
		plugins:[vue()]
	}
})