vue3使用process报错Uncaught ReferenceError: process is not defined

最新推荐文章于 2024-06-27 16:30:19 发布

_nico

最新推荐文章于 2024-06-27 16:30:19 发布

阅读量4.8k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/XUELINGMM/article/details/130683212

版权

在Vite+Vue3的项目中，与vue-cli不同，环境变量需通过import.meta.env来访问，并且变量名需以VITE_开头。若要自定义变量前缀，可在vite.config.ts设置envPrefix。例如，设置VITE_APP_BASE_URL或自定义前缀的环境变量，并在代码中引用。Vite内置了一些模式变量，如MODE,BASE_URL等，更多详情可查阅官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

之前使用vue-cli创建项目时，使用process.env.变量名获取环境变量（在根目录下配置环境配置文件之后）。

今天使用vite+vue3创建项目时，使用相同的方法却获取不到，还报以下错误，这是为什么呢？

在这里插入图片描述

问题解决

后来查看了VITE官网才知道，使用vite+vue的时候环境变量的获取方式变成如下:

import.meta.env.变量名
console.log( import.meta.env) //查看相关信息 这里不显示非VITE开头的变量

注意

必须要以”VITE_“开头的变量才能被识别读取,否则无法获取

// .env.development
NODE_ENV=development
VITE_APP_BASE_URL='http://localhost:xxxx'

如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_”

//vite.config.ts
export default defineConfig({
	plugins: [vue()],
	envPrefix:"APP_",   //APP_ 为自定义开头名
})

需要在最新的vite版本下才会生效，旧版本会导致build报错
import.meta.env，有几种内建变量，如下所示：

MODE：用来指明现在所处于的模式，一般通过它进行不同环境的区分，比如 dev、test、pre、prd 等等，默认为：“development”
BASE_URL：用来请求静态资源初始的 url
PROD：用来判断当前环境是否是正式环境
DEV：用来与 PROD 相反的环境
SSR：用来判断是否是服务端渲染的环境

注：更多的使用方式请看官网VITE
参考文档：Vue3+Vite使用环境变量.env的一些配置