跳到主要内容位置

Vite3

查看所有标签(分类)

如何在 Vite 2.0 项目中导入环境变量

峰华

环境变量是在开发中,用于设置可配置的信息。例如在前端开发中,我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量,这篇文章我们来看一下如何在 Vite 2.0 创建的项目中,创建和导入环境变量。

Vite 2.0 创建的项目中,默认有下面 4 个默认的环境变量:

配置 Vite 2.0 项目启动后自动打开浏览器

峰华

使用 Vite 2.0 创建的项目,默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器:

npm run dev

命令行中会提示访问 http://localhost:3000 这个链接,但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开,或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目,在启动之后自动打开浏览器呢?

Vite 配置代理 Proxy,避免跨域和重复编写url的问题

峰华

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如 https://example.com/api/some_end_pointhttps://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。 ​

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。