1. 
         

      1. 狗万官网酒店 > 狗万官网下载 > 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)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?