配置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 这一命令可以将 ...
随机推荐
- [redis读书笔记] 第二部分 sentinel
1.sentinel的初始化,会制定master的IP和port,然后sentinel会创建向被监视主服务器的命令连接和订阅连接: - 命令连接是用来和主服务器之间进行命令通信的 - 订阅连接,用于 ...
- 同步锁——ReentrantLock
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 Lock接口简介 在JUC包下面有一个java.util ...
- Linux运维---02.制作trove-redis镜像
redis-3.2 镜像制作及验证 镜像制作 1.安装redis yum install redis yum install epl-release yum install python-pip gi ...
- python--虚拟环境的使用
下载virtualenv # pip3 install virtualenv 创建虚拟环境(自定义虚拟环境名称为Aechery_env) # virtualenv -p python3 Archery ...
- 在Docker中运行SpringBoot程序
1.将SpringBoot项目中pom.xml的build插件更换为: <build> <plugins> <plugin> <groupId>org. ...
- 封装dropdown模块(使用到之前写好的动画组件,封装下拉菜单)
用 showhide 改写dropdown 模块: 1.首先在 css中新增动画相关样式 /*showhide组件的样式*/ .fadeOut{ opacity:; visibility: hidde ...
- 学习jQuery基础语法,并通过一个案例引出jQuery的核心
jquery是一个快速.小巧,功能强大的javascript函数库. jquery主要用来替代原生的javascript,简化代码. 前端最头疼的就是兼容:IE6/7/8兼容的最高版本是jQuery1 ...
- 寒假学习进度一(安卓配置环境的搭建和hello world)
今天学习内容:观看了哔哩哔哩上的安卓教学视频,简单了解下了安卓的基本知识 具体内容: 一.配置安卓开发环境(安装Android studio,配置JDK) Android studio是个集成环境,不 ...
- Oracle导出警告“EXP-00003: 未找到段 (0,0) 的存储定义”解决
环境:CentOS7.4 Oracle11.2.0.4(搭建rac集群) 问题描述:在使用exp命令执行导出的时候,部分表提示“EXP-00003: 未找到段 (0,0) 的存储定义”警告. 问题 ...
- 反射机制(reflection)
一.反射: 1.反射指可以在运行时加载.探知.使用编译期间完全未知的类. 2.程序在运行状态中,可以动态加载一个只有名称的类,对于任意一个已加载的类,都能够知道这个类的所有属性和方法: 对于任意一个对 ...