【Vue】在Vue项目中，开启本地静态服务，数据mock

zoe驿鹿

于 2019-12-03 12:12:00 发布

阅读量927

点赞数

分类专栏： Vue 文章标签： vue http-server 本地服务数据mock 数据联调

本文链接：https://blog.csdn.net/webFrontEndDev/article/details/103364907

版权

Vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用Vue CLI快速搭建项目，并通过配置代理实现本地服务接口调用。利用http-server启动mock数据服务，配合axios进行数据请求，实现前端与后端的无缝对接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装快速原型开发工具

npm install -g @vue/cli
npm install -g @vue/cli-service-global

在项目根目录添加配置文件，指定本地服务代理ip和端口号、接口路径如下：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/user': {
        target: 'http://localhost:8081',
        pathRewrite: {
          '/user': 'user.json'
        }
      },
      '/list': {
        target: 'http://localhost:8081',
        pathRewrite: {
          '/list': 'list.json'
        }
      },
      '/proxy': {
        target: 'http://localhost:8081',
        pathRewrite: {
          '/proxy': 'proxy.json'
        }
      }
    }
  }
}

在mock数据目录开启一个静态本地服务开发联调用，http-server 开启一个服务命令后面跟mock所在目录

http-server /src/mock   // 在指定目录开启服务

http-server . // 在当前目录开启服务

这里使用 axios 第三方库做数据请求

<script>
import axios from 'axios'
export default {
  name: 'list',
  data () {
    return {
      list: [],
      priceTxt: ''
    }
  },
  async mounted () {
    let { data: { list, price, rate } } = await axios.get('/list')
    this.$data.list = list
    this.$data.priceTxt = navigator.language === 'zh-CN' ? `￥${price * rate}` : `$${price}`
  }
}
</script>