vite 使用 env 环境变量

最新推荐文章于 2024-08-02 17:09:30 发布

m0_67392811

最新推荐文章于 2024-08-02 17:09:30 发布

阅读量1.9k

点赞数

分类专栏：前端 html 文章标签： npm 前端 vue.js

本文链接：https://blog.csdn.net/m0_67392811/article/details/123432280

版权

前端同时被 2 个专栏收录

34 篇文章 3 订阅

订阅专栏

html

34 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue3和Vite项目中设置和使用环境变量，通过创建.env.dev-sit和.env.dev-prod文件，区分不同环境的配置。在package.json中添加脚本命令实现多环境启动，并在vite.config.js中注入环境变量到HTML中，展示了在index.html中使用环境变量的例子。

摘要由CSDN通过智能技术生成

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 %>
npm run dev:sit
npm run dev:prod
分别运行之后查看效果！

持续更新中~