Vue2.0 cross-env配置分环境本地调试代理及打包

本文链接：https://blog.youkuaiyun.com/LikeStudyBoy/article/details/121489022

这篇博客介绍了如何使用cross-env在package.json中添加多个环境的运行命令，如`dev:one`和`build:one`，并详细解释了如何设置环境变量NODE_ENV和VUE_CONFIG来匹配不同的配置文件。同时，它还展示了如何在/config目录下创建对应的环境文件，如devOne.env.js和prodOne.env.js，以调整API接口和代理设置。在webpack.dev.conf和webpack.prod.conf中，通过process.env.VUE_CONFIG获取环境配置，并在proxyTable中配置API代理，解决本地调试时的跨域问题。

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

npm i cross-env -D

/package.json，根目录下package文件，默认初始化是这样

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src"
}

根据自己的需求，增加多个环境的运行命令

"dev:one": "cross-env NODE_ENV=development VUE_CONFIG=devOne webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

"build:one": "cross-env NODE_ENV=production VUE_CONFIG=prodOne node build/build.js",

利用cross-env，NODE_ENV代表以什么模式运行，VUE_CONFIG参数为自定义，需与/config下的文件名相对应

在/config下添加与VUE_CONFIG相对应的文件
devOne.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_CONFIG: '"devOne"',
  API: '"/api"', // 请求的API Base路径
  proxy: '"http:xx.xx.xx.xx:xx/xx"' // 如本地调试时，产生跨域，可以添加代理路径，配合API变量
  /*
  获取添加其他变量
   */
})

prodOne.env.js

'use strict'

module.exports = {
  NODE_ENV: '"production"',
  API: '""',
  VUE_CONFIG: '"prodOne"',
}

进到/build目录下,找到下面的配置，进行修改

webpack.dev.conf,webpack.prod.conf

const env = require(`../config/${process.env.VUE_CONFIG}.env`)

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    })
]

有这种情况，在本地调试时，需要调试后端接口，产生跨域问题，也可以根据不同的环境代理不同的接口

以上操作完毕后

进入/config/index.js

dev proxyTable

/api与/config下的环境文件中的事先备好的，API变量相对应，target是根据环境命令获取文件下提前定义好的proxy变量


const env = require(`./${process.env.VUE_CONFIG}.env`)


proxyTable: {
    '/api': {
        target: env.proxy.replace(/["]/g, ''),
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
}