在vue.config.js文件中,有几个嫌疑对象,port,host,target,一般host设置为0.0.0.0,大概就是自动匹配本机任意的ip地址,有啥用啥,感兴趣的可以自行搜索,这算是比较方便的写法,说是电脑手机都可以访问。port是本机的端口号,找一个能用的端口就行,像8080,90等等。

proxy里面的target就是代理,process是过程,就是项目启动的全局变量,process.env打印出来就是项目跑起来需要的环境,是一个环境变量,配合各种场景使用(应该是这么理解的吧too sad too bad)后面的VUE_APP_BASE_API是人为命名的,这个是一个拼接的地址,我们在这里设置的VUE_APP_BASE_API=/dev-api,意思是,只要给后端发送的地址有dev-api,我们就给他前面拼接上target这个代理的前缀,虽然在本机上还是localhost:8080/dev-api....(8080就是设置的port),但因为有了代理,其实给后端发送的就变成了10.155.40.12:8081/dev-api....(前面的地址是设置的target),这样子就能够完成代理,向后端请求数据了,天呐,我弄明白了。

const port = process.env.port || process.env.npm_config_port || 8082 // 端口

devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://10.155.40.12:8081`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  }

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐