vite别名设置以及安装mock数据

最新推荐文章于 2025-04-18 12:00:53 发布

Holy Ghost

最新推荐文章于 2025-04-18 12:00:53 发布

阅读量1k

点赞数

分类专栏： vue3 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42408773/article/details/121748277

版权

vue3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vite配置文件中设置别名路径映射，并详细指导了vite-plugin-mock的安装和使用，以实现API接口的模拟数据。通过实例演示了如何创建mock文件并调用，为前端开发提供本地开发环境下的数据模拟解决方案。

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

vite别名配置,mock配置

vite.config.js 中进行编辑

import vue from '@vitejs/plugin-vue'
//安装mock --->
// npm i mockjs -S 
// npm i vite-plugin-mock -D  
// 具体使用 https://github.com/anncwb/vite-plugin-mock
import { viteMockServe } from 'vite-plugin-mock'
// 设置别名
const {resolve} = require('path')

export default {
		//如需要支持ts 设置 supportTs: true
	  plugins: [vue(), viteMockServe({ supportTs: false })],
	  //设置别名
	  resolve: {
		  alias: [
		    { find: '@', replacement: resolve(__dirname, 'src') },
		    { find: 'styles', replacement: resolve(__dirname, 'src/styles') },
		    { find: 'plugins', replacement: resolve(__dirname, 'src/plugins') },
		    { find: 'store', replacement: resolve(__dirname, 'src/store') }
		  ]
	},
}

mock使用：创建mock/user.js

export default [
    {
      url: '/api/getUser',
      method: 'get',
      response: () => {
        return {
          code: 0,
          message: 'ok',
          data: ['terry','wade'],
        }
      },
    },
  ]


//页面调用
fetch('/api/getUser').then(res=>res.json().then(data=>{
  console.log(data);
}))