配置webpack开发环境、生产环境，不同命令分别打包

本文链接：https://blog.youkuaiyun.com/qq_35410544/article/details/105710524

本文介绍了一种在项目中根据不同的启动命令自动切换环境变量的方法，包括接口地址的动态配置，使得开发者可以轻松地在本地开发、测试和生产环境中进行切换，无需手动修改http地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上写的五花八门的，这个我亲自配置过，非常OK.以后一条命令就可以打包或者允许不用分后端服务地址，不用在复制粘贴修改http地址了

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",
    "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://www.test.com"'
      break
    default:
      baseUrl = '"http://www.up.com"'
}
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',

　baseUrl: baseUrl
})

3、在/config/prod.env.js中，通过process.argv获取一个命令数组，并为其配置相应的接口地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let params = process.argv[2]

let baseUrl = ''
switch (params) {
  case 'test':
      baseUrl = '"http://www.test.com"'
    break
  default:
      baseUrl = '"http://www.up.com"'
}
module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',

　baseUrl: baseUrl
})

配置好以后，在页面任何一个地方输入 =》process.env.baseUrl 这个就会返回相应的http地址
process.env.baseUrl可以在任意自己需要的地方用。也可以直接在main.js里使用

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 process.env.baseUrl=>http://www.up.com
本地运行测试环境：npm run dev_test process.env.baseUrl=>http://www.test.com

打包发布到正式环境：npm run build process.env.baseUrl=>http://www.up.com
打包发布到测试环境：npm run build test process.env.baseUrl=>http://www.test.com