uniapp(vue3+vite)环境变量配置

原创已于 2022-11-21 10:47:11 修改 · 4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #开发语言

收录于

于 2022-08-30 09:17:54 首次发布

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

本文介绍如何在uniapp使用vue3+vite环境下配置环境变量，包括修改package.json中的命令、创建.env.development文件并设置VITE_BASE_URL变量，以及如何在代码中全局访问这些变量。

uniapp(vue3+vite)环境变量配置

1.package.json

// 初始命令
"dev:mp-weixin": "uni -p mp-weixin"
// 改为
"dev:mp-weixin": "uni -p mp-weixin --mode development",

2.根目录新建.env.development(名字需要和–mode development一致，可以随意)

// 变量需要以VITE_开头
VITE_BASE_URL=http://dev.xx.xx

3.全局访问

import.meta.VITE_BASE_URL

4.说明

可以新建不同的指令来运行不同的环境；
uniapp官网也有配置方式，但依赖webpack 在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cv cv

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用UniApp、Vue 3和Vite实现多环境打包

AvskBug的博客

09-28

2618

我们通过配置环境变量、使用Vite进行打包，并在Vue组件中使用环境变量来实现不同环境下的API地址切换。在本文中，我们将探讨如何使用UniApp、Vue 3和Vite构建一个前端应用，并实现多环境的打包功能。我们将使用UniApp作为跨平台的开发框架，Vue 3作为主要的JavaScript框架，以及Vite作为打包工具。这将使用Vite进行打包，并根据当前环境的配置进行构建。的环境变量，它将根据不同的环境指向不同的API地址。文件中的环境变量，并将其注入到代码中。上面的代码中，我们使用了。

2 条评论您还未登录，请先登录后发表或查看评论

UniApp+Vite多环境配置实战：如何用envPlugin插件管理不同客户端的API和路由？

最新发布

weixin_29240343的博客

03-30

131

本文详细介绍了如何在UniApp+Vite项目中通过envPlugin插件实现多环境配置管理，解决不同客户端的API和路由差异问题。通过集中化配置、动态路由管理和构建流程优化，显著提升开发效率和维护性，特别适用于金融、电商等多客户端场景。

Vite环境下uniapp Vue 3项目添加和使用环境变量的完整指南

Jiaberrr的博客

11-08

2035

本文将详细介绍在Vite环境中，如何为uniapp Vue 3项目添加环境变量，并在项目中正确引用这些变量，以便在不同开发阶段（开发、测试、生产）进行灵活配置。

uni-app根据运行环境自定义环境变量

weixin_43938253的博客

04-03

8230

hbuilderX创建项目的自定义环境变量设置

vue3 如何获取env

seimeii的博客

07-28

4851

vue3 如何获取env

uniapp + vue3 + vite 环境变量配置

MockingBHM的博客

04-23

1万+

uniapp3与vite的环境变量配置的两种方案

uniapp 开发多端项目如何配置环境变量以及区分环境打包

郝峰vip的博客

06-17

9066

uniapp 开发跨端项目配置多环境变量,以及如何获取地址变量

HBuilder 工具创建uniapp+vue3项目如何配置接口环境变量

weixin_46505644的博客

09-06

765

uniapp vue3 + ts 配环境变量

uniapp+vue3+vite 使用.env .env.production .env.development [ HBuilderX的编译，是没有处理根目录下的.env文件的。所以手写 ]

weixin_47804432的博客

08-08

1721

uniapp vue3 vite 使用 .env .env.development .env.production

uni-app之使用Vite.config.js配置文件的详细教程

码奴一只猿

05-19

1万+

uni-app 是一个基于 Vue.js 的跨平台开发框架，而 Vite 是一个快速的前端构建工具。结合使用 Uni-app 和 Vite 可以提高开发效率和构建速度。本文将详细介绍如何使用 Vite.config.js 配置文件来配置 Uni-app 项目。

uniapp 设置环境变量

Stevetagelian的博客

01-12

5224

uniapp 设置环境变量

uniapp+vite配置环境变量

失眠时间的博客

11-01

1619

查看官方文档由于官方提示不支持在配置脚本--mode xx（实际H5是可以的，但是在微信小程序等使用就会报错）return {...define: {// "process.env.config": JSON.parse(process.env.UNI_CUSTOM_DEFINE || '{}'), // 也可自定义其他信息'process.env': process.env, // 配置变量在业务代码内生效},...});

小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode

热门推荐

snow的博客

06-08

2万+

uniapp微信小程序开发全记录

uniapp创建Vue3项目总结

qq_39891453的博客

07-11

7923

在项目src目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。exports 等于 module.exports，相当于在js文件头部，有一个module对象，module.exports = exports；在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。解决方法：将v-show 替换为 v-if。解决方案：配置所需要使用的第三方地图的。

《uniapp基础知识》学习笔记Day37-（Period2）教程之基本配置

qq_38526167的博客

03-02

984

uni-app 支持使用 ts 开发，可参考说明。

Vue3 —— 使用Vite配置环境变量

Bonsoir777的博客

12-16

1万+

文本主要介绍Vite的配置环境变量的问题

uniapp + vue3 + uviewPlus 搭建多端项目框架

码农ICoding

06-17

1万+

随着vite.js越来越受开发者青睐，很多大厂的项目都偏向于vue3开发，想着uniapp搭配vite4.x搭建多端项目效果会怎么样？经过一番实践发现果然不错！

uniapp 微信小程序多环境配置及使用

我总是词不达意的博客

03-22

1万+

uniapp 微信小程序多环境配置及使用，微信小程序自定义环境变量，根据环境变量更改请求地址

保姆级教程从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp

tepkco的博客

02-07

5812

本教程后面部分（用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp）适合习惯使用vscode或Webstorm等（或者说不习惯HBuilder X）的人参考，如果习惯使用HBuilder X，还是建议使用HBuilder X来搭建uniapp项目，会方便很多。 1. 配置node.js 1.1 下载并安装进入官网下载node.js，我这里下载的是最新版本的nodejs 下载完成后打开，点击next 点击next 选择安装的目录（建议放在其他盘上，我这里只有

uniapp和vite项目配置多环境编译，增加测试环境变量配置--mode test

10-31

2973

自定义的环境模式只能通过uni cli 的选项 --mode {mode} 来实现，这也是为什么使用HBuliderX cli 创建的项目不推荐使用.env，因为就算配置了.env文件，且确实在环境中可以拿到这些环境变量，但是只支持「运行」和「发行」对应的 .env.development 和.env.production ，如果我们想自定义一个test测试环境变量，是拿不到的，因为只能通过uni cli对应的mode选项标志去跑对应的环境，而HBuilderX无法配置mode。