狗万官网酒店 > 狗万官网下载 > Vue多环境代理配置方式思路详解_vue.js

Vue多环境代理配置方式思路详解_vue.js

来源: 2019-08-04 19:43 我来投稿 参与评论
多口合作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。下一场通过本文给大家分享Vue多环境代理配置方式思路详解,要求的爱人可以参考下

前景:

多口合作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。

主要,很容易引起冲突。

老二,很容易出现代理错误,要求排查。而且现在微服务盛行,在生养条件下有网关配置,不会出错,但是在地方调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很辛苦也很容易出错。

消灭思路:

1.付出中定义常量js文件,例如constants.js。我家存放各个服务要求代理的劳动名。

let api = ""
  let loginServer = "/loginServer"
  let businessServer = "/businessServe"
  if(process.env.NODE_ENV == "development"){
    api = "/api"
    loginServer = api + LoginServer
    businessServer = api + businessServer
  }
  export {
    loginServer,
    businessServer
  }

其中api为代理规则中安排,loginServer为服务名,可根据工作需求替换在具体的工作中就足以这么用

import {loginServer} from 'constants'
 function login(params){
  return axios.post(loginServer+"/login",params)
 }

其中 loginServer为服务名,login为艺术名,params为数。

在vue.config.js外方安排代理

modules.exports = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:"http://localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

这么配置可以满足需要,但是会有多口改动vue.config.js的事态,造成以上说的错误。

解决方案:

vue外方提供了 --mode 分立式,并提供了 .env.local 等文件,此文件被git忽视,且可根据目前 mode安装的值寻找环境容量配置,例如 --mode=dev ,则.env.dev.local 或.env.dev 等文件中的配置会立竿见影,.local文件会把git忽视,故而我们用这个,--mode安装在 package.json外方,在npm run serve 外方添加

script:{
"serve":"vue-cli-service serve --mode=dev"
}

在品种根目录下jianli .env.dev.local文件,文件中添加 以下键值对(此文件中只接收键值对

.env.dev.local

loginServerURL =http://localhost:8080
businessServerURL = http://localhost:8081

当然可根据不同之货仓式建立不同之local文件

.env.prod.local等

vue.config.js外方改写

modules.exports = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:process.env.loginServerURL?process.env.loginServerURL:"httpL//localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:process.env.loginServerURL?process.env.businessServerURL :"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

这样就足以根据不同之条件布置不同之地方了。

总结

上述所述是小编给大家介绍的Vue多环境代理配置方式思路详解,瞩望对大家有所帮助,如果大家有其他问题请给我留言,小编会适时回复大家的。在此也突出感谢大家对脚本的师网站的支持!
如果你认为本文对你有帮助,迎接转载,烦请注明出处,谢谢!

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?