vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）

一、区分不同环境

1.在根目录下新建3个文件（.env.development、.env.production、.env.uat）文件类型为.txt文件

.env.development

VUE_APP_BASE_API=开发环境地址
VUE_APP_ENV=development

.env.production

NODE_ENV=production
VUE_APP_BASE_API=生产环境地址
VUE_APP_ENV=production

.env.uat

NODE_ENV=production
VUE_APP_BASE_API=uat环境地址
VUE_APP_ENV=uat

二、设置baseURL

const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, //主要是设置baseURL的地址，不同项目结构可能修改的地方不同timeout: 600000 // request timeout
})

三、判断不同环境

这一部分有的同学可能用到，有的可能不需要

//判断不同环境
if(process.env.VUE_APP_ENV === 'production'){这里是生产环境
}else if(process.env.VUE_APP_ENV === 'uat'){这里是uat环境
}else if(process.env.VUE_APP_ENV === 'development'){这里是开发环境
}

四、配置打包命令

在package.json内配置

  "scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","uat": "vue-cli-service build --mode uat"},

五、根据不同命令打包到不同文件夹

在vue.config.js内配置outputDir

module.exports = {publicPath: './',// outputDir: 'dist',outputDir: process.env.VUE_APP_ENV === 'uat'?'uat':'dist',//配置这个地方assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: port,open: true,host: '0.0.0.0',overlay: {warnings: false,errors: false},proxy: {'/': {target: 'http://39.105.96.8:8083',changeOrigin: true,ws: false,pathRewrite: {'^/': '/'}}}},

参考文章：vue-cli3配置不同环境下的baseUrl和不同环境下的一些参数【生产环境、开发环境、测试环境】
本文章主要是添加了将最后文件打包到不同的文件夹

vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）相关推荐

[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST
[配置]VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL HOST process.env是什么? process.env 是 Node.js 中的一个环境对象.其 ...
vue配置开发、测试、生产环境（proxy中获取process.env.NODE_ENV）
先是看了这个文章写的如何npm run build 的时候自动配置地址参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
远程拷贝、查看端口、vim常见快捷键、查找替换命令、grep命令、查看存储空间的命令、chkconfig命令、系统自动启动级别、主机名配置、IP地址配置、域名映射、防火墙设置
2.1.远程拷贝 (将/export/servers/hadoop上的文件拷贝到bigdate@192.168.1.1:/export/servers/ ) scp –r /export/server ...
Vue cli3+Hubuilder将项目打包为App
前言现在跨平台的开发越发的火了起来.前端能做到的事情也越来越多,App再也不用完全依靠安卓原生开发了.现在开发app的方式都是内核是前端开发,然后再给项目套一个安卓的外壳,即可实现app的开发. V ...
tar命令打包时过滤特定文件夹
今天打包tomcat到另外的机器,但是原来运行了很多日志,不想打包过去于是就用过滤的方式,这里也记录一下. tar zcvf apache-tomcat-7.0.85.tar.gz apache-to ...
vue cli3.x 项目中引入 vux（一）：手动配置
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下: 建议 node.js 版本在 7.6.0 以上. 1.引入vux # npm instal ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
Vue cli3配置生产环境，开发环境，和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...

vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）

一、区分不同环境

1.在根目录下新建3个文件（.env.development、.env.production、.env.uat）文件类型为.txt文件

二、设置baseURL

三、判断不同环境

四、配置打包命令

五、根据不同命令打包到不同文件夹

vue-cli3通过不同命令打包文件到不同文件夹并配置不同请求地址（开发环境、UAT环境、生产环境）相关推荐

最新文章

热门文章