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就可以了，再也不用去文件中修改接口地址了。

这样我们就可以一劳永逸了，在启动和打包项目的时候一条命令直接搞定。