vite 使用 env 环境变量

1. 环境变量的理解

叽里呱啦一下，主要目的是学习vue3 + vite来搭建一个后台管理系统的项目。
认知：顾名思义就是变量在不同客户端环境下的不同表现。
场景：多人开发、多版本开发等。

1.1. .env.dev-sit文件

• 根目录下新建 .env.dev-sit 文件, 内容如下

# .env.dev-sit

NODE_ENV = development

VITE_APP_TITLE = 'DEV-SIT后台管理系统'

VITE_API_SERVER = ''

1.2. .env.dev-prod文件

• 根目录下新建 .env.dev-sit 文件, 内容如下

# .env.dev-prod

NODE_ENV = development

VITE_APP_TITLE = 'DEV-PROD后台管理系统'

VITE_API_SERVER = ''

1.2. 配置package.json, scripts下新增以下代码

{
	"scripts": {
		"dev:sit": "vite --mode dev-sit",
		"dev:prod": "vite --mode dev-prod",
	}
}

• 配置到这一步就已经完成了，此时已经分为了两个dev的环境 。
• npm run dev:sit
• npm run dev:prod
• 两种命令行运行起来之后就可以在不同环境下开发、测试了。

2. 环境变量的使用

• index.html中使用
• 跨域代理中使用

2.1. index.html中使用

• 安装 vite-plugin-html

npm install vite-plugin-html -D

• 编辑 vite.config.js

// vite.config.js

import { defineConfig, loadEnv } from 'vite'
import { injectHtml } from "vite-plugin-html";

const getEnvFn = (mode, target) => {
  return loadEnv(mode, process.cwd())[target]
}
export default ({mode}) => defineConfig({
	plugins: [
	    injectHtml({
			data: {
				title: getEnvFn(mode, "VITE_APP_TITLE")
			},
		}),
		// 其他配置
	]
})

• 编辑 index.html

<title><%- title %>title>

• npm run dev:sit
• npm run dev:prod
• 分别运行之后查看效果！

 持续更新中~