vue配置多个运行环境、打包环境,通过运行指令切换环境,通过切换环境控制对应环境的参数
01.配置环境
1.创建开发环境、测试环境、生产环境文件
2.给文件配置接口基础API,添加对应环境的所需参数,以生产环境为例
02.静态参数值跟随环境变化
1.环境配置文件中添加了两个参数(代理、websocket)
#开发环境nginx代理路径
VUE_APP_BASE_URL = 'manage-web-dev'
#开发环境websocket
VUE_APP_WEBSOCKET = '192.168.xx.xx:8080'
2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_WEBSOCKET,其他环境(测试环境、生产环境)也添加一致的参数
03.配置指令
通过配置package.json文件中的scripts来配置运行的指令
1.配置不同环境项目运行指令
"dev": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode testenvironment",
"prod": "vue-cli-service serve --mode production",
通过上述配置后,运行npm run dev就能运行生产环境、test就能运行测试环境
2.配置不同环境项目的打包指令
"build:test": "vue-cli-service build --mode testenvironment",
"build:prod": "vue-cli-service build --mode production"
通过上述配置后,运行npm run build:test就能打包测试环境的dist文件,build:prod就能打包生产环境的dist文件
注意:–mode 后面的名字为创建的环境文件的名称,需确保正确的名称
具体配置如下
04.配置环境对应的参数
1.参数定义
接口地址
VUE_APP_BASE_API = ‘http://192.168.xx.xx:8080’
#开发环境nginx代理路径
VUE_APP_BASE_URL = ‘manage-web-dev’
#开发环境websocket
VUE_APP_WEBSOCKET = ‘192.168.xx.xx:8080’
这里定义的VUE_APP_BASE_URL、VUE_APP_WEBSOCKET需在每个环境文件添加,为了在切换环境是都能读到对应的参数
2.参数使用
最常用的方式为:axios请求时配置接口地址,如下图所示
通过process.env.xxx参数配置环境里的参数,那么其他的参数也可通过该方式进行传参
以下为VUE_APP_WEBSOCKET参数的配置项
05.注意
通过环境文件配置的固定参数,需要给每一个环境都加上(切换环境时会找对应环境的参数)
package.json-scripts中指令对应的环境名称需要与文件名称一致–mode xxx(环境文件名称)
本文应用到的固定参数用途为:接口配置、websocket配置、nginx配置
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbfece
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13