接口代理

• 实现开发中有三种模式(服务器不同,数据库不同):  测试模式   开发模式  生产模式

  • 测试模式: testing   http://test.woniuxy.com:80   testMovie

  • (默认模式)开发模式: development   http://dev.woniuxy.com:80   devMovie

  • 生产模式   product   http://www.woniuxy.com    proMovie

• 全局变量  process(node)

• 配置文件

  • 自定义变量规范 VUE_APP_变量

 // 1. 创建三种文件
 // .env.test  .env.dev  .env.pro
 NODE_ENV=testing    
 VUE_APP_API=/(api|upload)
 VUE_APP_URL=http://127.0.0.1:5500
 VUE_APP_VIDEO=/video
 VUE_APP_VIDEOURL=http://api.biliibili.com/shuke/
 
 NODE_ENV=development
 VUE_APP_API=/(api|upload)
 VUE_APP_URL=http://127.0.0.1:6600
 
 NODE_ENV=production
 VUE_APP_API=/(api|upload)
 VUE_APP_URL=http://127.0.0.1:7700
 
 //启动配置
 "scripts": {
     "serve": "vue-cli-service serve",
     "serve:dev": "vue-cli-service serve --mode dev",
     "serve:test": "vue-cli-service serve --mode test",
     "serve:pro": "vue-cli-service serve --mode pro",
     "build": "vue-cli-service build"
 },
 
 //调用方法
 console.log("服务器代理接口",process.env.VUE_APP_API)
 console.log("服务器代理地址",process.env.VUE_APP_URL)
 
 //vue.config.js
  // 配置多个代理
 proxy: {
     [process.env.VUE_APP_API]:{
         target: process.env.VUE_APP_URL, // 要访问的接口域名
         ws: false, // 是否启用websockets
     },
      [process.env.VUE_APP_VIDEO]:{
         target: process.env.VUE_APP_VIDEOURL, // 要访问的接口域名
         ws: false, // 是否启用websockets
     },    
 }
 
 //其它组件中使用
  console.log(process.env)