webpack打开项目命令_配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。
1、开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情况手动来切换接口地址。
2、打包时要部署项目到不同的环境,而这也需要每次都根据情况切换接口地址。
虽说手动来切换地址是可以满足需求的,但是这种方式实属不是一种较为优雅的处理方式。那么,我们换一种优雅一点的方式来解决。
通过修改配置文件,让启动和打包项目时根据不同的命令,达到预期的结果。
下面就以Vue项目为例,介绍一下上述的解决办法,如果您有更好的方式,烦请联系我,大家相互交流学习。
1、启动项目时,需要修改/package.json、/config/dev.env.js和/src/main.js文件
1). 在/package.json中,为启动命令设置不同的参数
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
"dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
}
2). 在/config/dev.env.js中,通过process.argv获取一个命令数组,并为其配置相应的接口地址
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let params = process.argv[4]
let baseUrl = ''
switch (params) {
case '--env=test':
baseUrl = '"http://a.com"'
break
case '--env=prod':
baseUrl = '"http://b.com"'
break
default:
baseUrl = '"http://c.com"'
}
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
baseUrl: baseUrl
})
3). 在/src/main.js中,通过process.env.baseUrl 获取/config/dev.env.js文件的baseUrl并将其挂载在Vue的原型上
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = process.env.baseUrl
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
在不同接口地址下启动项目的时候,直接用对应的命令npm run dev、npm run dev_test、npm run dev_prod就可以了,再也不用去文件中修改接口地址了。
2、打包项目时,需要修改/config/prod.env.js和/src/main.js文件
1). 在/config/prod.env.js中,通过process.argv获取一个命令数组,并为其配置相应的接口地址
'use strict'
let params = process.argv[2]
let baseUrl = ''
switch (params) {
case 'test':
baseUrl = '"http://a.com"'
break
case 'prod':
baseUrl = '"http://b.com"'
break
default:
baseUrl = '"http://c.com"'
}
module.exports = merge(prodEnv, {
NODE_ENV: '"production"',
baseUrl: baseUrl
})
2). 在/src/main.js中,通过process.env.baseUrl 获取/config/prod.env.js文件的baseUrl并将其挂载在Vue的原型上
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = process.env.baseUrl
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
在打包不同环境下项目的时候,直接用对应的命令npm run build、npm run build test、npm run build prod就可以了,再也不用去文件中修改接口地址了。
这样我们就可以一劳永逸了,在启动和打包项目的时候一条命令直接搞定。
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境...相关推荐
- cadz轴归零命令_关于CAD中Z轴坐标归零问题的解决办法
原标题:关于CAD中Z轴坐标归零问题的解决办法 微信名:CAD吧 每日经典CAD解决方案 ❶ 史上最齐全的CAD下载链接:http://pan.baidu.com/s/1skP5jhb 密码:9qm2 ...
- hadoop如何使用linux命令,使用配置hadoop中常用的Linux(ubuntu)命令
生成key: $ ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa $ cat ~/.ssh/id_dsa.pub >> ~/.ssh/authorized ...
- 网卡清空缓存命令_清除网卡中IP缓存
如果你是一位网络管理员,遇到各式各样的网络故障是常有的事情:可是有的网络故障,无论怎么排除,就是无法消除.在万不得已的情况下,相信你肯定会删除网卡,然后重新安装网卡,以便让网卡恢复到"原始& ...
- linux wget 命令_在Linux中如何使用wget命令?
linux wget 命令 In this tutorial, let's learn how to download a file using the wget command in Linux. ...
- mysql 删除视图 命令_在MySQL中,删除视图使用(????)命令。
在MySQL中,删除视图使用(????)命令. 答:DROP 设计的优点之一就在于其在命令执行上的刚性 答:职能式 4月15日作业 答:笔记 喘证的主要临床特征是 答:呼吸急促,甚至张口抬肩,鼻翼煽动 ...
- 刷新mac地址命令_配置好Cisco交换机需要熟悉IOS命令及相关的知识
一.几种配置命令模式 switch> 这种提示符表示是在用户命令模式,只能使用一些查看命令. switch# 这种提示符表示是在特权命令模式. switch(config)# 这种提示符表示是全 ...
- linux tr 命令_在Linux中使用tr命令玩角色
linux tr 命令 tr command in Linux translates one set of characters to another. It can replace a charac ...
- linux扩展磁盘空间命令_在Linux上监视磁盘空间– SQL Server DBA的有用命令
linux扩展磁盘空间命令 In this article, we will explore the different Linux commands related to the disk spac ...
- mysql schema 保存数据_在MySQL中,所有触发器的定义都保存在information_schema数据库下的()表中。_学小易找答案...
[单选题]如何将英制 的零件转为公制的零件 ( ). [判断题]连续选择边线创建倒角时,不能单独修改某一边线的倒角大小 [判断题]创建筋特征时截面必须是闭和的 [填空题]Hibernate 的会话接口 ...
最新文章
- 怎么安装MYSQL5.0的JDBC驱动
- ElasticSearch性能优化策略【转】
- ADODB.Connection 错误 '800a0e7a' 未找到提供程序。该程序可能未正确安装。解决办法...
- 一张图看懂数据防泄漏
- gdi画平滑直线_石膏几何体不会画?那是你没有画过这些,学会画石膏很简单,收藏...
- docker hub 代理_MAC版 的最新Docker 2.2版本配置国内代理的解决办法
- Django 文件上传与下载的相关问题
- Git 入门 ---- Git 与 SVN 区别
- 左右侧边栏固定宽,中间宽度自适应
- CentOS7 添加端口
- RAID磁盘阵列与阵列卡
- UPC——帕琪的药园(dfs或并查集)
- kaggle员工离职预测案例(3)
- SEM竞价推广创意快速撰写的方法,智能创意制作
- Auto.js Pro安卓免ROOT引流脚本开发系列教程28网易公开课(6)-取随机话术
- plotly绘制简单图形<7>--用plotly画图参数设置
- 有线电视CATV、iptv、ott-tv区别
- lisp 套料_CAD自动编号插件下载
- 交换机短路_通信设备工程安装施工规范
- 一个清华学生留学香港后对人生的思考(转)