使用vite-plugin-mock出现404

最新推荐文章于 2024-03-23 19:25:59 发布
最新推荐文章于 2024-03-23 19:25:59 发布
阅读量274 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guhanfengdu/article/details/135203423
版权
那只猫喝咖啡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-plugin-html-template:用于Vite的html模板，例如用于Webpack的HtmlWebpackPlugin
04-07
vite-plugin-html-template 用于ViteHTML模板，例如用于Webpack的HtmlWebpackPlugin 动机 Vite需要html作为入口文件，这意味着对于SPA我们必须具有projectRoot / index.html，对于MPA必须具有projectRoot / src / pages / * / index.html 为什么不为所有条目html使用html模板 用法 yarn add vite-plugin-html-template // vite.config.ts import htmlTemplate from 'vite-plugin-html-template' // @see https://vitejs.dev/config/ export default defineConfig ( { plugins : [
vite-plugin-pwa：Vite的零配置PWA
02-05
产品特点 产生具有离线支持的Service Worker（通过 ） 自动注入Web App WIP ：策略选项 WIP ：元注入 WIP ：不同尺寸的图标生成 用法 :information_selector: v0.3.x支持Vite 2， v0.3.x支持Vite 1。 npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-pwa' export default { plugins : [ VitePWA
vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。
最新发布
m0_50360903的博客
03-23 1086
vite打包部署项目到nginx可能会遇到的全部问题。
vite-plugin-mock:vite.use模拟插件的模拟插件
05-16
Vite-plugin-mock English | 提供本地和产品模拟服务。 一个基于vite的模拟插件，它是基于Mockjs开发的。 并同时支持本地环境和生产环境。 Connect服务中间件在本地使用，mockjs在线使用 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add mockjs # or npm i mockjs -S yarn add vite-plugin-mock -D # or npm i vite-plugin-mock -D 例子 运行示例 # ts example cd ./examples/ts-examples yarn install yarn serve # js example cd ./examples/js-examples yarn install yarn serve 用法 开
vite-plugin-mpa:MPA（多页应用程序）
04-08
Vite-plugin-mpa 开箱即用的多页面应用程序，用于Vite，支持Vue2 / 3，React等 动机 访问本机支持多页，但必须配置rollupOptions.input 在访问开发人员时，必须为$projectRoot/src/pages/index/xxx.html打开localhost:3000/src/pages/index/xxx.html $projectRoot/src/pages/index/xxx.html vue-cli帮助重写MPA的URL，此插件执行相同的操作并自动为您打开第一页 实验：构建时，为您整理文件夹（如vue-cli）， dist/src/pages/subpage/index.html将移至dist/subpage/index.html 用法 yarn add vite-plugin-mpa // vite.config.ts impo
vite-plugin-psvg:PSVG的Vite
05-24
PSVG Vite插件 安装 安装 npm i vite-plugin-psvg -D # yarn add vite-plugin-psvg -D 将其添加到vite.config.js // vite.config.js import PSVG from 'vite-plugin-psvg' export default { plugins : [ PSVG ( ) ] , } ; 然后将其用作普通的SVG或图像。 < img src =' ./hello.psvg '> 例子 请参阅 。 执照 麻省理工学院执照:copyright:2020
Vue3解决：Mockjs 引入后并访问 404(Not Found) 的页面报错问题
狮子座的男孩
07-27 3897
但在页面 报错为：GET http://localhost:5173/list 404 (Not Found)(即：在页面并没有找到自己引入 Mockjs 时，设置的地址和假数据)功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;根据上述的问题剖析和描述，发现：在引入。项目中，引入了 Mockjs。后，设置的数据和地址有问题；
当你在Vue中使用Mockjs和axios的时候为什么会报404？
wh7pwb98的博客
12-09 3175
当你使用在Vue中使用Mockjs和axios的时候为什么会报404？ emmmm， 你可能需要看下main.js里面有没有把mock放进去， CTMD，烦躁 mock是你写的Mock文件
ts+vite+vite-plugin-mock使用避坑
weixin_43737647的博客
06-15 1301
vite-plugin-mock版本我这里使用的是2.9.6，版本比较稳定，其它版本可能会出现问题，推荐使用此版本。在项目根目录下创建mock文件夹，并同时创建index.ts与user.ts文件。：该配置项中，localEnabled配置项，从官方文档和百度上都是写的。这行配置项保存时，接口返回正常，再尝试打印。但是这样写，不但编辑器报错，而且请求。也报错404，准备放弃的时候，删除。index.ts文件。
关于Vue使用Mock接口报404的问题
lmchhh的博客
12-26 2922
关于Vue使用Mock接口报404的问题。初次在Vue中使用Mock的时候，引用了网上的常用做法：在根目录的vue.config.js文件下引用。但最终不管我怎么引用，都无法正常调用接口*/user/info*，总是报404。然后再调用接口*/user/info*，调用正常。尝试了很久，终于发现我的启动命令。
vite使用mock插件的配置(vite-plugin-mock)
du111_的博客
09-28 5859
vue + vite 使用mock插件的配置(vite-plugin-mock)
vite-plugin-md：针对Vite的Markdown
02-04
vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 :information: Vite 2为0.2.x，Vite 1为0.1.x 安装 安装 npm i vite-plugin-md -D # yarn add vite-plugin-md -D 将其添加到vite.config...
在使用vite-plugin-mock时遇到esbuild问题的解决方案
qq_39548988的博客
02-14 1997
是因为在使用npm V7以上版本时的bug,需要执行 node node_modules/vite-plugin-mock/node_modules/esbuild/install.js 之后再重新npm run dev 即可
uniapp中使用mock数据及返回404的常见原因
Sylvasylva的博客
11-02 4171
uniapp中使用mock及mock请求404常见问题
Vue3+vite4使用mockjs进行模拟开发遇到的坑
qq_32021429的博客
02-14 2227
Vue3+Vite+tsp配置mockjs
在vite(vue)中使用mock，vite-plugin-mock生产（线上）环境和开发环境配置
苦夏木禾
06-14 8037
在vite(vue)中使用mock，生产（线上）环境和开发环境配置
vite-plugin-mock配置和net::ERR_NAME_NOT_RESOLVED问题解决
sayUonly的博客
03-13 3018
vite-plugin-mock配置和net::ERR_NAME_NOT_RESOLVED问题解决 vite-plugin-mock配置 这个配置其实按照官网的来就很好，如果觉得官网看不明白的，可以接着我的往下看。 我们以vue3 + ts项目为例。 首先，在项目根目录创建文件夹mock用来保存mock的相关文件。 然后，我们在mock文件夹中创建index.ts入口文件和HelloWorld.ts测试文件。 // index.ts import { createProdMockServer } from
Day6 viteset 之 配置第二期
m0_73653709的博客
12-26 1039
vitest配置第二版
vue3 + vite动态路由打包404，找不到路由
m0_52329085的博客
10-16 906
本地npm run dev,路由加载正常，打包后，预览npm run preview时，就会出现下面问题。整理为需要的动态路由: 使用引入的 modules。在整理路由的位置引入。
vite-plugin-mock 2.3.0版本使用
05-25
vite-plugin-mock是Vite框架的一个插件，可以模拟接口数据，用于前端开发调试。在2.3.0版本中，该插件增加了对Mock.js 1.0的支持，并且对配置项进行了一些优化。 使用vite-plugin-mock 2.3.0的步骤如下： 1. 安装vite-plugin-mock ``` npm install vite-plugin-mock --save-dev ``` 2. 在vite.config.js中引入vite-plugin-mock，并进行配置 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import mock from 'vite-plugin-mock' export default defineConfig({ plugins: [ vue(), mock({ // mock配置项 }) ], // 其他配置项 }) ``` 3. 配置mock数据 可以在mock配置项中定义接口路径和对应的数据，也可以使用mockjs进行更加复杂的数据模拟。 ```javascript mock({ // 接口路径 '/api/user': { // 响应数据 name: 'John Doe', age: 28 }, // 使用mockjs生成数据 '/api/list': { 'list|10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-30': 20 }] } }) ``` 4. 在前端代码中使用接口地址 在前端代码中使用接口地址时，可以直接使用定义好的路径。 ```javascript // 发送GET请求，获取用户信息 const user = await fetch('/api/user').then(res => res.json()) // 发送POST请求，提交表单数据 const data = { name: 'John', age: 30 } const result = await fetch('/api/form', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).then(res => res.json()) ``` 以上就是vite-plugin-mock 2.3.0版本的使用方法。需要注意的是，该插件只在开发环境下生效，打包后的代码不会包含mock数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值