vue的接口怎么访问到mock的数据

如果你已经使用 Mock.js 来模拟接口数据，那么在 Vue 中访问 Mock 数据可以按照以下步骤进行：

1. 首先，在 Vue 项目中安装 `axios` 和 `mockjs` 依赖：

   npm install axios mockjs --save-dev

2. 在 `src` 目录下新建一个 `mock` 文件夹，并在其中创建一个 `index.js` 文件，用于编写 Mock 数据的代码：

   import Mock from 'mockjs'

   // 模拟一个接口
   Mock.mock('/api/data', {
     'list|5-10': [{
       'id|+1': 1,
       'name': '@cname'
     }]
   })

   export default Mock

3. 在 `main.js` 中引入 `mock` 文件，以启用 Mock 数据：

   import Vue from 'vue'
   import App from './App.vue'
   import Mock from './mock'

   Vue.config.productionTip = false

   new Vue({
     render: h => h(App),
   }).$mount('#app')

4. 在组件中，通过 `axios` 访问 Mock 数据：

   <template>
     <div>
       <ul>
         <li v-for="item in list" :key="item.id">{{ item.name }}</li>
       </ul>
     </div>
   </template>

   <script>
   import axios from 'axios'

   export default {
     data() {
       return {
         list: []
       }
     },
     mounted() {
       axios.get('/api/data').then(res => {
         this.list = res.data.list
       })
     }
   }
   </script>

这样，你就可以在 Vue 中访问 Mock 数据了。需要注意的是，在使用 Mock 数据时，你需要保证接口地址与 Mock 数据的地址一致，否则会导致访问不到 Mock 数据。