Vue-cli脚手架设置代理

其实这里我们主要说的是vue-cli脚手架的服务代理,在这之前,你可能并没有解读过脚手架的配置文件等信息,但是你需要对vue有一定的了解,并对一些服务有所了解,主要是为了在开发模式下解决接口请求的问题。

—— 前言

在写这篇文章之前,我们首先要知道vue-cli脚手架的开发模式启动,cd到我们的项目目录之后,npm run dev进行项目启动,启动完成之后会出现如下:

同时,我们启动的是本地localhost:8080的服务,如果我们在本地开发的后台项目只能使用别的端口,这里以再在本地启动apache 或者 tomcat服务。我们需要将自己的请求接口代理到别的服务中去,只需要配置vue-cli脚手架目录地下的config/index.js文件即可:


主要配置proxyTable:{}即可;

修改前(代码片段):
  1. dev: {
  2. env: require("./dev.env"),
  3. port: 8080,
  4. autoOpenBrowser: true,
  5. assetsSubDirectory: "static",
  6. assetsPublicPath: "/",
  7. proxyTable: {},
  8. cssSourceMap: false
  9. }
修改后(代码示例)
  1. dev: {
  2. env: require("./dev.env"),// 使用 config/dev.env.js 中定义的编译环境
  3. port: 8080,// 运行测试页面的端口
  4. autoOpenBrowser: true,
  5. assetsSubDirectory: "static",// 编译输出的二级目录
  6. assetsPublicPath: "/",// 编译发布上线路径的根目录,可配置为资源服务器域名或 CDN 域名
  7. proxyTable: {
  8. "/iantooData/": {
  9. target: "http://localhost:80/webgit",
  10. pathRewrite: {
  11. "^/mspapi/": "/"
  12. }
  13. }
  14. }, // 需要 proxyTable 代理的接口(可跨域)
  15. cssSourceMap: false // 是否开启 cssSourceMap
  16. }

如果配置过nginx的朋友对这块就在熟悉不过了。按照名称,代理道不同的路径。就是这么简单。
最后修改之后需要重新启动cli脚手架的服务。

评论: