65941745@qq.com
65941745@qq.com
  • 发布:2019-06-18 09:47
  • 更新:2020-07-19 23:27
  • 阅读:12436

uni-app如何多环境配置部署,使用npm的方式。

分类:uni-app

我们项目使用jenkins打包部署,多环境,所以需要可以配置不同环境的参数。必须使用npm的方式打包部署。
那么请问uni-app使用npm的方式如何配置多环境打包部署,尤其是需要配置<base>标签,我们的环境路径都不相同。

你们的打包命名如下:
cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build
我也找不到在哪个命令里去配置index.html的里的js和css加载路径的。但是如果可以在index.html追加一个base标签应该也可以解决。
或者我发现你们有<%= BASE_URL %>这个变量,如果可以配置也不错。

我真的期望官方可以把配置配置暴露在外面,我们可以自如的追加一些配置。
使用咱们的开发工具打包就无法兼容jenkins的自动部署了,现在不都是自动部署吗?

2019-06-18 09:47 负责人:无 分享
已邀请:
1294001595@qq.com

1294001595@qq.com - 90后IT男

同求官方解决方案!!!!

在 Hbuilder X 下

目前提供的 process.env.NODE_ENV 只能区分 《开发环境》和《生产环境》

引用官方文档说明:
开发环境和生产环境
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境

现在我需要区分 开发、QA、预发布、生产,4个环境,如何满足???

if (process.env.NODE_ENV === 'development') {
// TODO
}

if (process.env.NODE_ENV === 'qa') {
// TODO
}

if (process.env.NODE_ENV === 'pre-release') {
// TODO
}

if (process.env.NODE_ENV === 'production') {
// TODO
}

  • 1046512080@qq.com

    解决了吗

    2019-09-17 16:05

  • laravuel

    同求解决方案,真实开发根本不可能就一个开发和生产环境的啊

    2020-05-05 13:32

769912429@qq.com

769912429@qq.com - 前端攻城狮

在manifest.json 配置一下就可以解决js和css的路径问题

 "h5": {  
    "title": "XXXX",  
    "publicPath":"./"  
  }
香蕉不是笨啦啦

香蕉不是笨啦啦 - 哈哈哈

process.env.NODE_ENV了解一下

  • 65941745@qq.com (作者)

    能稍微说明白些,怎么配置?不太懂,非常感谢

    2019-06-18 10:36

  • 香蕉不是笨啦啦

    回复 65941745@qq.com: process.env.NODE_ENV是全局变量,可以通过他判断当前什么环境

    2019-06-18 11:04

  • 65941745@qq.com (作者)

    回复 香蕉不是笨啦啦: 那我需要在index.html设置:

    默认打包:<script src=/static/js/chunk-vendors.e308e601.js>

    我想在12环境设置成<script src=12/static/js/chunk-vendors.e308e601.js>

    我想在32环境设置成<script src=32/static/js/chunk-vendors.e308e601.js>

    怎么做?

    2019-06-18 13:42

65941745@qq.com

65941745@qq.com (作者)

src/manifest.json文件可以配置base属性,但是我看了编译配置,只能配置一个h5,为何不支持多个?我怎么去配置多个环境?我的天,没人有这个问题吗?
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "history",
"base" : "/123/"
},
"sdkConfigs" : {
"maps" : {
"qqmap" : {
"key" : ""
}
}
}
}

  • 香蕉不是笨啦啦

    你的设计本身就存在问题,除了h5端其他都没有入口html

    2019-06-18 16:13

登天白龙

登天白龙

我也有这个困扰。虽然 process.env.NODE_ENV 能区分正式环境,还是测试环境,但是没有办法做到更加随心所欲的区分。
理想是能通过 cross-env 到指定的环境。
现在我在sripts里面增加变量,在 process.env 中没有。

845572627@qq.com

845572627@qq.com

我在package.json中新增了几个环境变量

        "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",  
        "build:h5-m": "cross-env NODE_ENV=master UNI_PLATFORM=h5 vue-cli-service uni-build",  
        "build:h5-r": "cross-env NODE_ENV=release UNI_PLATFORM=h5 vue-cli-service uni-build",

当执行如下 命令时

    npm run build:h5-m

会报错,报错信息

TypeError: Cannot set property 'namedModules' of undefined  
TypeError: Cannot set property 'namedModules' of undefined
  • HelloStandBy

    uni-app 基于vue-cli3.x的,所以在添加环境变量的时候需要使用 VUE_APP_ 起始,比如 VUE_APP_ENV=production;

    然后可以通过 process.env.VUE_APP_ENV 访问。

    2019-08-13 16:29

  • 845572627@qq.com

    回复 HelloStandBy: 解决了,谢谢啦

    2019-08-15 10:05

半晴雨滴

半晴雨滴 - 选择我所爱的,爱我所选择的。

mark一下,最近我们也遇到了这个问题。

342829674@qq.com
517118777@qq.com

517118777@qq.com

那么 现在解决了吗

769912429@qq.com

769912429@qq.com - 前端攻城狮

用环境变量解决!

769912429@qq.com

769912429@qq.com - 前端攻城狮


先了解下cli 环境变量 在项目中配置变量文件,文件内配置:VUE_APP_PROXY=”对应环境接口地址“
拦截器配置:
// 接口代理
const proxy = process.env.VUE_APP_PROXY
在config的baseURL 中设置为proxy
如果需要既能用命令运行及指定版本 又能在本地Hbuilder运行项目的话 则先判断是否存在proxy 如果不存在proxy 则表示在本地运行中 在本地则直接指定接口地址!
package.json 修改配置:
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --mode",
"dev:h5": "cross-env NODE_ENV=development vue-cli-service uni-serve --mode",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode", 等等类似 添加
打包:
npm run build:h5 -- 环境名 如:npm run build:h5 --dev

1251588243@qq.com
398927951@qq.com
哈哈一笑

哈哈一笑

请问能分享下吗,

,我尝试配置了一个测试环境,报错,说只有production和development2个环境啊

442946831@qq.com

442946831@qq.com - 存在的即是合理的

mark

xunli-03@163.com
Basil

Basil

mark

sdsd22@qq.com

sdsd22@qq.com

为何运行真机环境后, process.evn.VUE_APP_XXX 就取不到值了

  • 332801451@qq.com

    兄弟你的解决了吗?同问真机找不到

    2020-07-23 14:55

1094783128@qq.com

1094783128@qq.com

这是我的解决方案:

配置不同的编译环境

说明

  1. 在uni-app中没有require.content这个方法
  2. process.env 无法往其中添加属性,但是可以在vue.config.js中改变已有的属性的值。
  3. require() 中无法使用变量读取文件。
  4. 默认的HbuilderX中,只有两种编译环境。点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
  5. App.vue 的执行先于main.js

解决方案

本次多环境的解决方案如下:

  1. 在根目录下创建.env.js,.env.dev.js,.env.prod.js这三个文件。

.env.js

;  
(function() {  
    const NODE_ENV = 'dev'; // dev:开发环境 | test:测试环境  
    let ENV_VAR = null;  

    if (process.env.NODE_ENV === "development") {  

        if (NODE_ENV === 'dev') {  
            ENV_VAR = require('.env.dev.js');  
        } else if (NODE_ENV === 'test') {  

        }  

    } else if (process.env.NODE_ENV === "production") {  

        ENV_VAR = require('.env.prod.js');  

    }  

    if (ENV_VAR) {  
        process.uniEnv = {};  
        for (let key in ENV_VAR) {  
            process.uniEnv[key] = ENV_VAR[key];  
        }  
    }  
})();

.env.dev.js

const UNI_APP = {  
    BASE_API: '/dev-api'  
}  

module.exports = UNI_APP;

.env.prod.js

const UNI_APP = {  
    BASE_API = '/prod-api'  
}  

module.exports = UNI_APP;

 .env.js 起到一个总控的作用,根据NODE_ENV变量的值加载不同的文件,起到环境变量切换的效果。有一点需要注意的是,我们需使用process.uniEnv.xxx来获取我们设置的全局变量值。

在App.vue 引入.env.js并设置globalData

import '.env.js'  
export default {  
    globalData: process.uniEnv  
};

参考地址

  1. uni-app中的运行环境

要回复问题请先登录注册