Vue 在不同的环境使用不同的接口地址

解决不同命令下项目启动和打包到指定的环境

前后端分离的项目开发中，一般都会有开发环境、测试环境、生产环境。
  • 开发环境下调试接口的时候，一般都会有好几个接口地址（开发服务器上的，本地的，接口开发人员的，七七八八的接口地址），要根据情况手动来切换接口地址。
  • 打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。
虽说手动来切换地址是可以满足需求的，但是这种方式实属不是一种较为优雅的处理方式。通过修改配置文件，让启动和打包项目时根据不同的命令，可以达到预期的结果。
  • 启动项目时，需要修改/config/dev.env.js
    – 在/config/dev.env.js中，通过process.argv获取一个命令数组，并为其配置相应的接口地址
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
let params = process.argv[4]
let API_HOST = ''
switch (params) {
    case '--env=test':
      API_HOST: '"http://100.84.186.157:8000"'
      break
    case '--env=prod':
      API_HOST: '"http://shepherd-b.beta.corp.11bee.com"'
      break
    default:
      API_HOST: '"http://shepherd-b.beta.corp.11bee.com"'
}
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: API_HOST
})
  • 打包项目时，需要修改/config/prod.env.js
    – 在/config/prod.env.js中，通过process.argv获取一个命令数组，并为其配置相应的接口地址
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://shepherd.corp.11bee.com"'
}
  • 在/package.json中，为启动命令设置不同的参数
"scripts": {
  "dev": "webpack-dev-server --disableHostCheck=true --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "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-prod": "node build/build.js",
  "build-beta": "node build/build-beta.js"
},
在不同接口地址下启动项目的时候，直接用对应的命令npm run dev、npm run dev_test、npm run dev_prod就可以了，再也不用去文件中修改接口地址了。
在打包不同环境下项目的时候，直接用对应的命令npm run build_beta、npm run build_prod就可以了
posted @ 2021-02-28 23:50  yuzhen0228  阅读(674)  评论(0)  编辑  收藏  举报