vite学习教程02、vite+vue2配置环境变量

文章目录

前言

博主介绍:✌目前全网粉丝3W+,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。

涵盖技术内容:Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。

博主所有博客文件目录索引:博客目录索引(持续更新)

视频平台:b站-Coder长路


1、安装依赖

shell 复制代码
npm install --save-dev cross-env

2、配置环境变量

在项目根目录下创建 .env 文件,分别为不同环境创建不同的环境变量配置。例如:

  • .env:默认环境
  • .env.development:开发环境
  • .env.production:生产环境
shell 复制代码
# .env
VITE_API_URL=http://localhost:3000

# .env.development
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.prod.example.com

注意:对于网络服务的变量名VITE_API_URL必须VITE_开头,否则获取不到,无效。


3、应用环境变量

在项目中,你可以通过 import.meta.env 访问这些环境变量。

js 复制代码
// 在 Vue 组件或任何 JS 文件中
console.log("import.meta.env=>", import.meta.env)
console.log("import.meta.env.VITE_API_URL=>", import.meta.env.VITE_API_URL)

实操下:

效果:


4、运行和构建项目

使用不同的环境变量运行和构建项目。在命令行中,你可以通过 --mode 选项指定环境。

shell 复制代码
# 开发环境
vite --mode development

# 生产环境
vite build --mode production

可以在 package.json 的脚本中定义不同的命令,以便更方便地运行和构建:

json 复制代码
// package.json
{
  "scripts": {
    "dev": "vite --mode development",
    "pro": "vite --mode production",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },
}

此时我们运行与构建项目命令为:

shell 复制代码
npm run dev
npm run build:dev
npm run build:pro

资料获取

大家点赞、收藏、关注、评论啦~

精彩专栏推荐订阅:在下方专栏👇🏻

更多博客与资料可查看👇🏻获取联系方式👇🏻,🍅文末获取开发资源及更多资源博客获取🍅

相关推荐
给月亮点灯|16 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手16 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰16 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh011316 小时前
LRU 缓存
开发语言·前端·javascript
yangzhi_emo17 小时前
ES6笔记5
前端·笔记·es6
Hexene...18 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See18 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
普通码农18 小时前
Element Plus 数字输入框箭头隐藏方案
前端
草字18 小时前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css