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

最新推荐文章于 2024-10-26 07:54:34 发布

原创

最新推荐文章于 2024-10-26 07:54:34 发布 · 置顶 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #proxy #cross-env #多环境

这篇博客介绍了如何使用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代理，解决本地调试时的跨域问题。

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"' // 如本地调试时，产生