Uniapp | uniapp多环境开发部署

简介: 在vue2中我们可以直接在package.json中添加代码,获取环境只需要 process.env 获取到,运行的时候,会有三个选项,执行某一个即可。

1、vue2

在vue2中我们可以直接在package.json中添加代码,获取环境只需要 process.env 获取到,运行的时候,会有三个选项,执行某一个即可。

"uni-app": {
  "scripts": {
    "dev": {
      "title": "微信小程序——开发版",
      "env": {
        "name": "dev",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxxxx"
      }
    },
    "test": {
      "title": "微信小程序——测试版",
      "env": {
        "name": "test",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxxx"
      }
    },
    "pro": {
      "title": "微信小程序——正式版",
      "env": {
        "name": "pro",
        "UNI_PLATFORM": "mp-weixin",
        "VUE_APP_BASE_URL": "xxx"
      }
    }
  }
}

2、vue3

在vue3中获取不到 process。所以需要一些改造。

  • 同样需要添加上面的 pagkage.json 中的代码,方便运行。
  • 创建几个文件

本地开发环境

export default {
  ENV: "dev",
  VUE_APP_BASE_URL: "xxx",
};

线上生产环境

export default {
  ENV: "pro",
  VUE_APP_BASE_URL: "xxx",
};

测试环境

export default {
  ENV: "test",
  VUE_APP_BASE_URL: "xxx",
};

导出环境

// 导出上面的环境
import dev from "./.env.dev";
import test from "./.env.test";
import pro from "./.env.pro";

export default {
  dev,
  test,
  pro,
};
  • 修改vite.config.ts
    ```
    import { defineConfig } from "vite";
    import uni from "@dcloudio/vite-plugin-uni";
    import path from "path";
    import ENV_CONFIG from "./src/utils/.env";

export default defineConfig({
// 添加 @
resolve: {
alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
},
plugins: [uni()],
define: {
"process.env.config": ENV_CONFIG,
},
});
```

  • 使用的时候,获取请求地址。
    process.env.config[process.env.name].VUE_APP_BASE_URL。这样就可以获取到不同环境下的请求地址。
相关文章
|
1月前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
1天前
|
开发框架 前端开发 JavaScript
uniapp开发鸿蒙,是前端新出路吗?
相信不少前端从业者一听uniapp支持开发鸿蒙Next后非常振奋。猫林老师作为7年前端er也是非常激动,第一时间体验了下。在这里也给大家分享一下我的看法
29 17
|
1月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
2月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
146 1
uniapp一个人开发APP关键步骤和考虑因素
|
2月前
|
Web App开发 移动开发 前端开发
uniapp环境H5运行及发行(入门必学)
uniapp环境H5运行及发行(入门必学)
272 5
|
2月前
|
前端开发 JavaScript PHP
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
137 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
4月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍