首页 前端知识 【Vue3】env环境变量的配置和使用(区分cli和vite)

【Vue3】env环境变量的配置和使用(区分cli和vite)

2024-08-10 00:08:27 前端知识 前端哥 632 603 我要收藏

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

  • 前言
  • 一、env文件
  • 二、vue3+cli加载env
    • 1..env配置
    • 2..dev配置(其他环境参考)
    • 3.package.json文件
    • 4.使用
  • 三、vue3+vite加载env
    • 1..env配置
    • 2..dev配置(其他环境参考)
    • 3.package.json文件
    • 4.使用


前言

目前vue程序可以通过cli和vite两种方式构建,但是两种方式加载env的方式有些不同,这里基于自己的理解简单记录。


一、env文件

通过我们会在项目的根目录下创建.env文件,通常包括.env、.env.dev、.env.pro、.env.test,这里的env文件跟后边的动态加载有关。
在这里插入图片描述

二、vue3+cli加载env

1…env配置

通过cli加载env,配置中名字需要以VUE_APP开头

VUE_APP_PORT = 8000

2…dev配置(其他环境参考)

VUE_APP_BASE_URL_API="http://127.0.0.1:8000/api/"
VUE_APP_ENV = 'development'

3.package.json文件

{
  "name": "ruleVue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint --mode test"
  },
  ...
}

4.使用

在这里插入图片描述

三、vue3+vite加载env

1…env配置

通过cli加载env,配置中名字需要以VITE_开头

VITE_PORT = 8000

2…dev配置(其他环境参考)

VITE_BASE_URL_API="http://127.0.0.1:8000/api/"
VITE_ENV = 'development'

3.package.json文件

	"scripts": {
	  "dev": "vite --mode dev",
	  "pro": "vite --mode pro",
	  "build:dev": "vite build --mode dev",
	  "build:pro": "vite build --mode pro",
	  "preview": "vite preview"
	},
	...

4.使用

import.meta.env.VITE_API_URL
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15172.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!