Vue 2.0 --webpack.dev.conf.js--本地模拟数据（因为2.0删除了build文件下的dev-server.s ）！！

最新推荐文章于 2024-05-10 18:55:27 发布
最新推荐文章于 2024-05-10 18:55:27 发布
阅读量629 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38776549/article/details/80368541
版权

在Vue2.0下官方移除了build文件下的dev-server.js,但是我们想要模拟本地数据怎么办呢？

可以在build/webpack.dev.conf.js里模拟数据

所有的前提是你安装好了Vue-cli脚手架工具!!!

第一步！一步

安装express 建议 npm install --save express

然后再 npm run dev 

第三张图第二个网页也是个模拟数据的网站，有需要的话可以发私信，我会做一个小的Vue模拟数据帖子！

 

详解vue-cli脚手架build目录中的dev-server.js配置文件
10-18
最后，dev-server.js使用webpack模块，根据环境变量决定加载webpack.dev.conf.js（开发环境的webpack配置）还是webpack.prod.conf.js（生产环境的webpack配置）。这是利用了Node.js的条件判断语句来动态引入文件，...
Vue进阶（五十二）：vue-cli 脚手架 webpack.dev.conf.js 配置文件详解
IT全栈 华强工作室
05-09 5266
此配置文件是vue开发环境的wepack相关配置文件。 // 引入当前目录中的utils工具配置文件 var utils = require('./utils') // 引入webpack来使用webpack内置插件 var webpack = require('webpack') // 引入config目录中的index.js配置文件 var config = require('../confi...
Vue2之vue.config.js的webpack配置文件详解
热门推荐
Mr.小灰狼_随笔
02-25 1万+
Vue 之 vue.config.js 的webpack配置文件详解 目录 一、常用配置项 1、导出模块 2、publicPath 部署应用包的基本Url 3、outputDir 输出文件目录 4、assetsDir 打包后生成的静态资源目录 5、lintOnSave 6、productionSourceMap 生产环境的 source map 7、​​​​​​​devServer 8、css相关配置
vue模拟本地数据（webpack.dev.conf.js）
是喵喵酱呀！
04-07 286
三个步骤 1：在static文件夹下面方式模拟json数据文件（我命名为schedule.json） 2：在webpack.dev.conf.js webpack.dev.conf.js 的const portfinder = require('portfinder') 后面加上 const express = require('express'); const app = express();...
webpack.dev.conf.js详解
xuyizhuo的博客
10-30 4200
webpack.dev.conf.js详解 转载自https://www.cnblogs.com/ye-hcj/p/7087205.html 1.1 说明 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请在1.3中查看 1.2 代码配置 // 引入当前目录中的utils工具配置文件 // 请自行查看我博客中的utils.js的相关文章 var utils = require('./utils')...
vue -- 脚手架之webpack.dev.conf.js
weixin_33989780的博客
09-26 214
webpack.dev.conf.js 开发环境模式配置文件： 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils.js const webpack = require('webpack')//使用webpack来使用webpack内置插件 const config = require('../conf...
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
10-17
这样，即使`dev-server.js`文件不在`build`目录下，你也能成功配置Mock数据。请记住，Mock数据的目的是为了在开发过程中提供模拟的API响应，而不是替代实际的后端服务。在项目部署时，应替换为真实的API接口。如果你...
vue2.0在没有dev-server.js下的本地数据配置方法
11-30
在vue2.0的以上的版本，vue-cli的build的文件夹下没有dev-server.js文件，那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require(‘portfinder')后添加 const express...
vue-cli-boilerplate__template:A Nice Boilerplate Template for creating medium plus Vue.js projects webpack.dll.conf.js预编译，happypack多线程加快打包速度
05-15
Vue-cli样板模板！ 一个不错的样板模板，用于创建中等+ Vue.js项目 构建设置 # install dependencies npm install || yarn install # serve with hot ...webpack.dll.conf.js预编译，happypack多线程提高打包效率
webpack.dev.conf.js文件
倾世~茹薇
04-27 4138
webpack.dev.conf.js文件是在项目开发环境下使用的文件。该文件中的module对象：rules中增加了cssSourceMap的功能。const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.css...
前端项目启动报错：config buildwebpack.dev.conf.js
Jan's的博客
10-24 4661
启动成功，说明之前端口地址，可能被占用，尝试修改启动端口，或者kill占用此端口的线程。所以说有些教程就挺害人的，当然，一般搞前端也知道这些是错的，就怕不懂的。的版本，吐槽一下，网上很多命令就不对，比如下面这个教程，我截了个图。然后，卸载原来的webpack、安装对应版本webpack。如果不行，那我也不知道了，请参考浏览器吧。这种情况下报错，一般呢，是有3种情况。地址设置的是服务器的地址啥的也有可能。映射关系，需要修改本机host文件。地址无效，尝试修改一个不常用端口号。，如果能够启动成功，说明本机。
webpack使用流程和配置
husai20的博客
11-27 1466
Webpack基本使用流程 Webpack配置文件 Webpack插件与加载器使用 webpack服务器开发
vue3.0 在webpack.dev.conf.js 中 配置mock数据
@必意玲
04-24 2139
vue-cli 的build的文件夹下没有dev-server.js文件，怎么配置mock数据 因为最新版本3.0的vue-cli已经放弃 dev-server.js，只需在 webpack.dev.conf.js 配置就行 下面是详细的步骤： 1.新版 webpack.dev.conf.js 配置如下： const express = require('express') const app...
data.json
weixin_30578677的博客
01-16 444
{ "seller": { "name": "粥品香坊（回龙观）", "description": "蜂鸟专送", "deliveryTime": 38, "score": 4.2, "serviceScore": 4.1, "foodScore": 4.3, "rankRate": 69.2, "minPrice": 20, "delive...
vue-cli分析-webpack.dev.config.js
weixin_34384557的博客
08-08 2425
本系列文章主要讲下vue的webpack脚手架的前因后果,逐行分析其操作。如果写的有问题请务必指出！如果觉得写的还不错点个赞就是对我最大的鼓励了,谢谢！ 架构说明 当使用vue-cli脚手架生成项目后,项目架构与其作用大概是这样的： build负责针对不同编译环境,webpack采用哪些配置,摒弃哪些机制相关 config是build编译文件的另外扩展,把需要用到的配置提取出来,让配置更模块化 ...
＞ dev ＞ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
chanyeolchichi的博客
05-13 4903
> dev> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 使用npm run dev 产生了错误。 目前存在这种情况，可能是三个原因造成的 1.webpack版本与vue版本不一致 2.本地运行IP地址不正确 3.本地运行localhost与127.0.0.1映射被修改 1.webpack版本与vue版本不一致 1.查看vue版本 vue -V 4.5.15 2.卸载、安装对应版本we.
webpack.dev.conf.js
一梦醉殇
12-26 892
var utils = require('./utils')//封装了一些方法的工具 var webpack = require('webpack')//使用 webpack var config = require('../config')//使用 config/index.js var merge = require('webpack-merge')//使用 webpack
解决：项目名@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`错误
m0_62567916的博客
07-22 5577
要是serve启动命令为：npm run serve。要是dev 启动命令为：npm run dev。
“webpack-dev-server --config build/webpack.dev.conf.js” 请问这个问题要如何修复
最新发布
weixin_42565831的博客
05-10 231
反映了你的实际部署路径。
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
08-24
webpack-dev-server是一个用于开发环境的工具，它提供了一个实时重载的开发服务器。通过使用命令"> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"，你可以启动webpack-dev-server，其中"--inline"选项用于在浏览器中内联模式显示编译错误和警告，"--progress"选项用于在控制台中显示编译进度，"--config build/webpack.dev.conf.js"选项用于指定webpack配置文件的路径。这个配置文件包含了开发环境的相关配置信息，例如入口文件、输出路径等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [＞ dev ＞ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js](https://blog.csdn.net/chanyeolchichi/article/details/124688983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js](https://blog.csdn.net/qq_18671415/article/details/109306424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue-cli项目根据线上环境分别打出测试包和生产包](https://download.csdn.net/download/weixin_38643141/13588313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值