vue和json-server实现端口对接

①首先创建vue项目，并安装需要的依赖

第一步：用官网的vue创建指令：

npm create vue@latest

第二步：安装需要的依赖axios和json-server(npm源服务器在国外，这里如果不用npm镜像可能安装不到需要的依赖)

cnpm i axios
cnpm install -g json-server

 第三部：在src文件夹下创建一个data.json文件，随便写点，这里是用json-server官网样例

 

②在package.json中进行项目配置

在scriipts中添一条mock指令：json-server --watch src/data.json(这里是要写.json文件所在的路径) --port 4000(这个端口随便写，只要不和vue项目运行的端口冲突即可)

使用cnpm run mock开启下端口：

 

然后ctrl+点击下第一条：

 

说明json环境部署成功o(*￣▽￣*)ブ 

③配置项目以及网球请求函数

创建一个.js文件保存配置好的请求函数，可以如图写一个简单的请求函数：

 然后在vite.config.json文件下进行如图修改：这段代码就为了解决json文件和vue项目文件端口不一致导致的跨域问题

 然后可以编写像如下代码：就表示网络请求成功了o(*￣▽￣*)ブ

<script setup>
import{get}from './http'
async function sendrequest(){
  const res=await get('/api/posts');
  console.log(res.data);
}
</script>

<template>
  <div>
    <h1>数据测试</h1>
    <button @click="sendrequest">查询数据</button>
  </div>
</template>

<style scoped>

</style>