用vue-cli构建的项目，怎么调试接口?

Question

npm run build 然后把dist目录上传服务器吗？这样效率很低

Answer 1

我先假设你说的接口就是ajax的get和post之类的请求。你可以在./config/index.js的proxyTable里面写需要代理的接口。例如你这个工程的端口号是8080，后台的端口是3000，而你有一个/dosth的接口要调试，你只需要在proxyTable里写上：

...
proxyTable: {
    '/dosth': {
        target: 'localhost:3000',
        changeOrigin: true
    }
}
...

就可以啦～
具体文档看这里

Answer 2

我自己的项目里也遇到类似的问题，我通过json-server搭建了一个本地测试服务器，代理到本地的json文件，分享一下代码：基于vue-cli

dev-server.js

var jsonServer = require('json-server')
var apiServer = jsonServer.create()
var apiRouter = jsonServer.router('db.json')
var apiMiddlewares = jsonServer.defaults()
 
apiServer.use(apiMiddlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(port + 1, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (port + 1) + '\n')
})

首先启用一个json测试服务器，讲/api请求代理到db.json这样一个文件上
根据json-server文档，db.json大概长这个样子

{
  "getBoardList": [
    {
      "title": "开放产品",
      "description": "开放产品是一款开放产品",
      "saleout": false
    },
    {
      "title": "品牌营销",
      "description": "品牌营销帮助你的产品更好地找到定位",
      "saleout": false
    },
    {
      "title": "使命必达",
      "description": "使命必达快速迭代永远保持最前端的速度",
      "saleout": true
    },
    {
      "title": "勇攀高峰",
      "description": "帮你勇闯高峰，到达事业的顶峰",
      "saleout": false
    }
  ]
}

当你ajax 请求 api/getBoardList, 代理服务器帮你转到这里对应的json数据

在vue-cli里， config/index.js 可以设定代理，代码如下

dev: {
    env: require('./dev.env'),
    port: 8888,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api/': 'http://localhost:8889/'
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
}

在测试服将api请求代理到8889端口

在vue组件里，我们配合vue-resource就可以这么用

let resource = this.$resource('api{/type}');
resource.save({type: 'getBoardList'}, {hello: 'world'})
.then(function (data) {
    console.log(data)
}, function (error) {
    console.log(error)
})

Answer 3

npm run dev是开发模式, npm run build是生产模式

在开发模式下完成开发和测试, 让后用生产模式生成文件, 最后丢到相关服务器上