Vue3+vite环境变量配置

这篇具有很好参考价值的文章主要介绍了Vue3+vite环境变量配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目开发中,通常来说,不同的环境会有不同的请求api接口,这就需要修改配置,才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值。

# 环境变量文件(.env)

在项目根目录(和src同级)中创建三个文件:

Vue3+vite环境变量配置

.env.development 

# 【开发环境】
NODE_ENV = development

# base api
VITE_APP_BASE_API = '/api' 

.env.staging

# 【测试环境】
NODE_ENV = staging

# base api
VITE_APP_BASE_API = '/api' 

.env.production

# 【生产环境】
NODE_ENV = production

# base api
VITE_APP_BASE_API = '/api' 

# 环境变量定义与获取

定义:变量以 VITE_XXX 进行定义。如果想自定义 env 变量的前缀,可以在vite.config.js里配置 envPrefix。

获取:import.meta.env.VITE_XXX process.env.VITE_XXX

通常使用 import.meta.env.VITE_XXX 可以获取到环境变量,而vite.config.js除外。

在vite.config.js中自定义环境变量前缀及获取环境变量的配置如下:文章来源地址https://www.toymoban.com/news/detail-447436.html

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");

export default defineConfig(({command, mode }) => {
  	const env = loadEnv(mode, process.cwd())
  	console.log(env.VITE_APP_BASE_API) // 获取环境变量
  	return {
	    plugins: [vue()],
	    envPrefix:  ['VITE', 'VUE'],   // 环境变量前缀,默认只会暴露VITE开头变量,定义后可暴露VUE开头变量
	    define: {
	      	'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API),
	    },
  	}
})


 # package.json多环境配置

    "scripts": { 
        "dev": "vite",            // 开发环境
        "serve": "vite preview",  // 本地预览
        "staging": "vite build --mode staging",  // 测试环境打包
        "build": "vite build",    // 生产环境打包
    },

到了这里,关于Vue3+vite环境变量配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(88)
  • vue3+vite中使用环境变量 .env 的一些配置情况说明

    在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1、设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_” 2、在 vite 中使用环境变量,可以用

    2024年02月04日
    浏览(60)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

    Vue 是前端开发中非常常见的一种框架,它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中,组件的开发也变得非常简单,但随着 Vue3 版本的发布,组件开发有了更多的特性和优化,为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件

    2024年02月19日
    浏览(83)
  • vue3微信公众号商城项目实战系列(1)开发环境准备

    项目忙完,这次上新,写一个前端系列,采用vue3来开发一个微信公众号商城。 前言: 1. 微信公众号商城本质也是一个网站,由一个个网页组成,只不过这些网页运行在手机端,能响应手指的点击、长按、拖拽等操作。 2. 既然是网页,当然可以用3件套(js+html+css)来写,但象

    2023年04月14日
    浏览(96)
  • uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

    想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果: 微信小程

    2024年02月05日
    浏览(87)
  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(62)
  • vite搭建vue3项目本地环境自定义域名及端口配置

    本blog讲述的是vite直接创建的vue3的项目的本地环境自定义域名配置。 windows 首先配置本地的一个域名代理指向。 在windows环境下host文件的位置是 C:WindowsSystem32driversetc 我们需要打开目录下的hosts文件然后在 其中找到127.0.0.1然后在后面追加一行 Mac 在mac系统中我们需要打开终

    2024年02月06日
    浏览(121)
  • vue项目docker docker-compose 本地开发环境配置

    配置Docker Compose用于在本地开发Vue项目是一个方便且高效的方法。Docker Compose允许您定义和管理多个容器组成的应用程序。 一、配置Docker Compose文件,用于在本地开发Vue项目 docker-compose.yaml 二、配置 Dockerfile Dockerfile 三、在终端中进入Vue项目的根目录,然后运行以下命令来启动

    2024年02月15日
    浏览(52)
  • vite项目配置本地开发使用https访问,3分钟搞定

    在开发过程中,有时候需要用到一些音视频接口等需要https才能拿到权限,为方便开发过程中调试,这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档:开发服务器选项 | Vite 官方中文文档 这个插件仓库地址:https://github.com/vitejs/vite-plugin-basic-ssl 安装依赖

    2024年02月22日
    浏览(70)
  • vue3 解决使用vscode开发工具编辑vue3项目时代码一直标红

    从网上查的,插件还没升级到vue3版本(比如vue3项目根标签可以多个,vue2项目根标签只能有一个,以及等等差异) 解决方法1 然后关闭vscode,再重启vscode就可以了! 解决方法2 将eslint插件卸载重装,就可以解决了!

    2024年02月07日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包