#Vue篇:环境变量process.env.VUE_APP_API_URL&import.meta.env.VITE_API_URL

环境变量文件同样需要以 .env 开头。

Vue 2 默认使用 ​Webpack 作为构建工具

https://cli.vuejs.org/zh/guide/mode-and-env.html // webpack

环境变量必须以 VUE_APP_ 开头,才能在客户端代码中通过 process.env 访问。

console.log(process.env.VUE_APP_API_URL);

Vue 3 的环境变量使用vite

https://cn.vitejs.dev/guide/env-and-mode.html // vite

环境变量也必须以 VITE_ 开头,才能在客户端代码中通过 import.meta.env 访问(而不是 process.env)。

console.log(import.meta.env.VITE_API_URL);

模式和环境变量 环境变量

tsx 复制代码
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

Vue CLI

Vue CLI 是一个基于 ​Webpack 的完整脚手架工具,专注于为 Vue.js 项目提供开箱即用的开发体验

通过 vue.config.js 文件自定义 Webpack 配置。

Vite

Vue 官方推荐新项目使用 Vite,Vite 已经成为 Vue 3 的默认构建工具。

通过 vite.config.js 文件自定义配置。

优先级

​优先级

环境变量文件的优先级从高到低如下:

.env.[mode].local

.env.[mode]

.env.local

.env

加载文件

.env.development.local

.env.development

.env.local

.env

.env.development.local 的优先级最高,会覆盖了其他文件的值。

相关推荐
DarkLONGLOVE13 分钟前
彻底解决"'vue-cli-service' 不是内部或外部命令"的问题!
前端·vue.js
怪大叔952728 分钟前
vue组件之远程组件
前端·javascript·vue.js
Hilaku1 小时前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
抠脚小弟1 小时前
实现vue组件库并发布npm上使用流程
前端·vue.js·npm
米粉03051 小时前
SpringBoot+Vue+MySQL全栈开发实战:前后端接口对接与数据存储详解
vue.js·spring boot·mysql
阳火锅2 小时前
为了实现AI对话的打字效果,我封装一个vue3自定义指令
前端·vue.js·面试
十年砍柴---小火苗2 小时前
vue的created和mounted区别
javascript·vue.js·ecmascript
bitbitDown2 小时前
同事用了个@vue:mounted,我去官网找了半天没找到
前端·javascript·vue.js
仰望.3 小时前
vxe-table vue 表格复选框多选数据,实现快捷键 Shift 批量选择功能
vue.js·vxe-table
武昌库里写JAVA3 小时前
iview组件库:关于分页组件的使用与注意点
java·vue.js·spring boot·学习·课程设计