前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。
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就可以了,再也不用去文件中修改接口地址了。
这样我们就可以一劳永逸了,在启动和打包项目的时候一条命令直接搞定。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。