配置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: '<App/>'
})
在不同接口地址下启动项目的时候,直接用对应的命令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: '<App/>'
})
在打包不同环境下项目的时候,直接用对应的命令npm run build、npm run build test、npm run build prod就可以了,再也不用去文件中修改接口地址了。
这样我们就可以一劳永逸了,在启动和打包项目的时候一条命令直接搞定。
配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境的更多相关文章
- 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...
- JEECG框架中使用Flash版本Uploadify,在Chrome版本号70下无法启动的解决办法
感谢文章:https://www.cnblogs.com/zinan/p/6902427.html 单独打开IFRAME中的页面 点击导航栏的<不安全> 再刷新单独IFRAME的页面,就可 ...
- Vue、webpack中默认的config.js、index.js 配置详情
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...
- webpack / vue项目 config/index.js配置(用于配置webpack服务器代理)
'use strict' // Template version: 1.1.3 // see http://vuejs-templates.github.io/webpack for document ...
- webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)
vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
- main.js中import引入css与引入js的区别
表现:引入css样式文件能够作用到全局,而引入js文件就只能在main.js中产生作用 在 main.js 中引入的 css 都是全局生效的.引入的 js 文件只在 main.js 中生效,是因为 m ...
- eclipse中找不到base64包的解决方法
eclipse中找不到base64包的解决方法 2017年08月26日 11:05:26 yzp_leo 阅读数:634 标签: javaeclipsebase64更多 个人分类: 日记 ecli ...
- 配置webpack.config.js中的文件
webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...
随机推荐
- [Effective Java 读书笔记] 第6章 枚举和注解
第三十条 用enum代替int 总得来说,使用enum有几点好处 1.编译时的类型安全, 2.可以保证就是自己定义的值,不会有月结风险, 3.每个枚举类型有自己的命名空间 4.枚举可以添加任意的方法和 ...
- Linux 查看CPU、内存、机器型号等硬件信息
# 查看CPU信息 #查看CPU信息(型号) [root@localhost ~]# cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 32 ...
- junit测试的介绍和应用
目录 1.junit测试简介 2.运行环境 3.测试过程 1.junit测试简介 JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于Kent ...
- 用C语言实现汉诺塔自动递归演示程序
用C语言实现汉诺塔自动递归演示程序 程序实现效果 1.变界面大小依照输入递归数改变. 2.汉诺塔自动移动演示. 3.采用gotoxy实现流畅刷新. 4.保留文字显示递归流程 程序展示及实现 githu ...
- .net代码实现上千次ping的实现
先上代码: 多线程实现ping校验: public void PingCameraNew(List<CameraMongoDto> assetlist) { ThreadPool.SetM ...
- Zookeeper分布式协调即分布式锁机制
主要用到的Zookeeper机制: 临时+有序节点,节点watch机制 过程: 发生分布式锁竞争时,参与竞争的各个客户端服务都到Zookeeper的同一父节点(代表着同一把锁)下建立自己的临时+有序子 ...
- github无法访问的解决实践
无废话版: ----------------------------- 1.复制下面内容,添加到hosts文件里(C:\Windows\System32\drivers\etc)不能修改的话,则把文件 ...
- 小程序封装request请求
//request.js var host = 'https://www.xxx.com';//请求域名 module.exports = function (type, params, method ...
- <packaging>pom</packaging>是什么意思
<packaging>pom</packaging>是什么意思? 答: 以下配置<packaging>pom</packaging>的意思是使用mave ...
- STL专题
一.algorithm 1.sort 问题1:给你n个整数,请按从大到小的顺序输出其中前m大的数. Input:每组测试数据有两行,第一行有两个数n,m(0<n,m<1000000),第二 ...