在VUE3+Vite 中 mock 数据

1.

  安装 mockjs 和 vite-plugin-mock

npm i mockjs vite-plugin-mock --save-dev

 

2. 在 vite.config.ts 文件中配置 vite-plugin-mock  ， 貌似安装的mock相关在这里注册就可以，其它的文件不需要引用mock相关内容。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "./mock/"
    })
  ]
})

3. 在根目录下创建mock文件夹 ，注意是根目录， 不是 src

新建文件 mock/index.js

/**

 * 所有站点数据

 */

export default [

  {

    url: "/api/stations",

    type: "get",

    response: () => {

      return stationData

    }

  }

]

 

如果 mock 文件夹建在src 文件目录下，需要修改 tsconfig.json 文件

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","src/mock/**/*.ts"],

 

4. 调用

const getStationData = () => {


  axios.get("/api/stations")
  .then(res => {




    const data = res.data




    console.log(data)




})
}

 

参考： https://blog.csdn.net/liguoyuan819/article/details/124768562