我们项目使用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的自动部署了，现在不都是自动部署吗？
1***@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
}
我在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
uni-app 基于vue-cli3.x的，所以在添加环境变量的时候需要使用 VUE_APP_ 起始，比如 VUE_APP_ENV=production;
然后可以通过 process.env.VUE_APP_ENV 访问。
2019-08-13 16:29
7***@qq.com - 前端攻城狮
在manifest.json 配置一下就可以解决js和css的路径问题
"h5": {
"title": "XXXX",
"publicPath":"./"
}
这是我的解决方案：
- 在uni-app中没有require.content这个方法
- process.env 无法往其中添加属性，但是可以在vue.config.js中改变已有的属性的值。
- require() 中无法使用变量读取文件。
- 默认的HbuilderX中，只有两种编译环境。点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
- App.vue 的执行先于main.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
};
我用了这种方案之后，nvue环境下会报错，经过排查，nvue页面，默认不加载vue的原型上自己挂载的模块，也不能访问process，但是可以访问process.env和process.env.NODE_ENV。于是我修改了一下loader加载的地方，
/* 注入环境变量
const NODE_ENV = ''; // test:测试环境 | pre:预发布环境
const processNvue = {env:{},my_env:{}}
let GLOBAL_ENV = require('./.env.js')
let ENV_VAR = {
development: {
// test:require('./.env.test.js') // 需要拓展环境就在这里加
}[NODE_ENV] || require('./.env.dev.js'),
production: {
// pre:require('./.env.pre.js')
}[NODE_ENV] || require('./.env.prod.js')
}[process.env.NODE_ENV] || {}
// 导入环境变量 nvue 环境无法直接访问process, 但是可以访问process.env 和 process.env.NODE_ENV
// #ifndef APP-NVUE
process.my_env = Object.assign(process.env,ENV_VAR,GLOBAL_ENV)
// #endif
// 构造一个process对象出来，防止http模块报错
// #ifdef APP-NVUE
processNvue.my_env = Object.assign(processNvue.env,{NODE_ENV:process.env.NODE_ENV},ENV_VAR,GLOBAL_ENV)
// #endif
// console.log('-------环境变量测试-------',process,process.env,process.env.NODE_ENV)
export default processNvue
2020-09-28 15:21
这样只需要在nvue引入到环境变量的地方（比如http封装的模块），重新加载一次该模块才行
// #ifdef APP-NVUE
Fly = require("flyio/dist/npm/weex")
const process = require('@/envLoader.js').default // nvue 页面模块会重新导入，导致，环境变量丢失，需要重新再加载次
// #endif
2020-09-28 15:23
manifestDev.js
const fs = require('fs')
fs.readFile('./src/manifest.json', function(err, data) {
// 读取manifest.json 文件
if(err){
throw err;
}else {
// 成功时修改数据
var arr = JSON.parse(data)
arr.h5.router.base = '/c1/'
var newjson = JSON.stringify(arr)
fs.writeFile('./src/manifest.json',newjson,function(err){
console.log(err)
})
}
})在打包的时候使用
"build:dev": "node src/manifestDev.js && cross-env NODE_ENV=dev UNI_PLATFORM=h5 vue-cli-service uni-build"
配置多个文件去更新
我目前的解决方案是这样
需求是： 测试服 base: '/c1/' 正式服 base: '/c/'
这个只是备用方案，如果有更好的选择的话，这个还是不要用
香蕉不是笨啦啦 - 哈哈哈
process.env.NODE_ENV了解一下
6***@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
6***@qq.com (作者)
src/manifest.json文件可以配置base属性，但是我看了编译配置，只能配置一个h5，为何不支持多个？我怎么去配置多个环境？我的天，没人有这个问题吗？
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "history",
"base" : "/123/"
},
"sdkConfigs" : {
"maps" : {
"qqmap" : {
"key" : ""
}
}
}
}
我也有这个困扰。虽然 process.env.NODE_ENV 能区分正式环境，还是测试环境，但是没有办法做到更加随心所欲的区分。
理想是能通过 cross-env 到指定的环境。
现在我在sripts里面增加变量，在 process.env 中没有。
7***@qq.com - 前端攻城狮
"build:h5": "cross-env VUE_APP_ENV=production NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
添加一个 VUE_APP_ENV=production 用来区分环境 生产环境
"build:h5-test": "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
添加一个 VUE_APP_ENV=development 用来区分环境 测试环境
NODE_ENV=production 不修改打包时的
在manifest.json 中配置
"router" : {
"mode" : "history",
"base" : "./"
}
打包时的路径更改
环境判断
if (process.env.VUE_APP_ENV == 'production') {
/ 生产环境 /
BaseUrl = ""
} else if (process.env.VUE_APP_ENV == 'development') {
/ 测试环境 /
BaseUrl = ""
} else {
/ 本地运行环境 /
BaseUrl = “";
}
即可实现多环境打包
如果修改 NODE_ENV 打包出来的项目 需要改变 "router" : {
"mode" : "history",
"base" : "./" 中 base 的目录配置
}
所以 打包测试和生产时添加 VUE_APP_ENV 参数即可
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
扶摇而上
解决了吗
2019-09-17 16:05
laravuel
同求解决方案，真实开发根本不可能就一个开发和生产环境的啊
2020-05-05 13:32
清风袭来
我也想问这个问题， 官方的也就只能配置h5的
2020-08-12 16:37