精华内容
下载资源
问答
  • 一个vue2 webpack2 mock的脚手架
  • webpack-mock-middleware 在webpack开发模式,该中间件配合devServer.before提供了一种快速本地mock数据的方案。 mock目录下为数据js,与接口地址相对应,如axios.get('/api/user') -> mock目录下api/user.js 用法 #...
  • vue+webpack 配置mock模拟数据

    千次阅读 2018-08-24 16:14:53
    这里说的是指配置mock环境 1、npm install mock 2、npm install cross-env 这是我的mock目录 在package.json 文件中配置 使用cross-env NODE_ENV 传入参数mock(至于为什么用cross-env :是兼容win操作系统...

    这里说的是指配置mock环境

    1、npm install mock

    2、npm install cross-env

    这是我的mock目录

    在package.json 文件中配置

    使用cross-env NODE_ENV 传入参数mock(至于为什么用cross-env :是兼容win操作系统)

    之后在config目录下的dev.env.js 文件里设置

    这样就可以设置开发环境的env

    之后可以在main.js中设置

    至此,就可以使用npm run mock 来愉快的使用模拟数据开发页面了

    另附上mock模拟数据

    Mock.mock(`${domain}/url`, 'post', {
      status: '1',
      data: {
        idName: '张三',
        idNumber: '421022199010136015'
      }
    })

     

    展开全文
  • webpack mock模式配置

    2020-03-18 11:53:11
    https://www.webpackjs.com/plugins/define-plugin/ https://www.webpackjs.com/guides/production/#%E6%8C%87%E5%AE%9A%E7%8E%AF%E5%A2%83 mock有两...

    https://blog.csdn.net/weixin_33815613/article/details/88027401
    https://www.webpackjs.com/plugins/define-plugin/
    https://www.webpackjs.com/guides/production/#%E6%8C%87%E5%AE%9A%E7%8E%AF%E5%A2%83

    mock有两种,
    一种是使用后台提供的mock接口,可直接在类似yapi后台提供模拟返回数据
    一种是在本地用mock接口拦截请求,需要把返回数据都放在本地
    两种都可以修改假数据,方便测试

    1. 使用后台mock接口
      要点是使用DefinePlugin设置process.env.NODE_ENV 为mock,方便在代码里区分
    const merge = require('webpack-merge');
    const common = require('./webpack.common.js');
    const webpack = require('webpack');
    
    module.exports = merge(common, {
        mode: 'development',
        devtool: 'inline-source-map',
        devServer: { //webpack-dev-server设置
            contentBase: './src',
            port: 8082,
            open: true,
            inline: true,
            hot: true,
            historyApiFallback: true,
            overlay: true
        },
        watchOptions: { //webpack watch设置
            poll: 1000,
            ignored: /node_modules/,
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('mock')
            }),
            new webpack.HotModuleReplacementPlugin(),
        ]
    })
    
    1. mockjs 提供本地mock
    /**
     * 本地mock模块
     * 目前mock模式用的是后台mock服务器,没有用该模块
     */
    import Mock from 'mockjs'
    
    // 使用方法: 
    //step 1. npm install mockjs
    //step 2. import './mock/mock.js' 
    //step 3. 在需要的地方调用:
    // let res = await util.post({
    //     url: '/news/index',
    //     data: {}
    // })
    
    // 获取 mock.Random 对象
    const Random = Mock.Random;
    // mock一组数据
    const produceNewsData = function() {
        let articles = [];
        for (let i = 0; i < 100; i++) {
            let newArticleObject = {
                title: Random.csentence(5, 30), //  Random.csentence( min, max )
                thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
                author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
                date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
            }
            articles.push(newArticleObject)
        }
     
        return {
            articles: articles
        }
    }
     
    // Mock.mock( url, post/get , 返回的数据);
    Mock.mock('/news/index', 'post', produceNewsData);
    
    
    展开全文
  • 本篇文章主要介绍了vue+vuecli+webpack中使用mockjs模拟后端数据的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • dev-server文件在最新的vue版本中是webpack.dev.conf.js 代码没有太大变动,只是语法上有一些改变 !!修改后一定重新启动npm run dev,才能访问到接口数据 webpack.dev.conf.js文件 const express = require('...

    dev-server文件在最新的vue版本中是webpack.dev.conf.js
    代码没有太大变动,只是语法上有一些改变
    !!修改后一定重新启动npm run dev,才能访问到接口数据
    webpack.dev.conf.js文件

    const express = require('express')
    const app = express()//请求server
    var goodsData = require('../mock/goods')//加载本地数据文件
    var router = express.Router()
    app.use(router)//通过路由请求数据
    
    ......
    devServer: {
    ...
    ,  before(app){
          app.get('/goods',(req,res)=>{
            res.json(goodsData);
          })
        }
    }
    

    mock数据
    goods.json

    {
      "status":"0",
      "msg":"",
      "result":[
        {
          "productId":100001,
          "productName":"音响",
          "productPrice":"199",
          "productImg":"1.jpg"
        },
        {
          "productId":100002,
          "productName":"入耳式耳机",
          "productPrice":"99",
          "productImg":"2.jpg"
        },
        {
          "productId":100003,
          "productName":"头戴式耳机",
          "productPrice":"399",
          "productImg":"3.jpg"
        },
        {
          "productId":100004,
          "productName":"头戴式耳机",
          "productPrice":"399",
          "productImg":"4.jpg"
        },
        {
          "productId":100005,
          "productName":"充电宝",
          "productPrice":"99",
          "productImg":"5.jpg"
        }
      ]
    }
    

    前端组件代码实现
    GoodList.vue

          <li v-for = "(item,index) in goodsList">
                      <div class="pic">
                        <a href="#"><img v-bind:src="'/static/'+item.productImg" alt=""></a>
                      </div>
                      <div class="main">
                        <div class="name">{{ item.productName}}</div>
                        <div class="price">{{ item.productPrice}}</div>
                        <div class="btn-area">
                          <a href="javascript:;" class="btn btn--m">加入购物车</a>
                        </div>
                      </div>
                    </li>
    

    界面展示
    在这里插入图片描述
    参考最新的vue webpack模板没有dev-server.js文件,进行后台数据模拟笔记

    展开全文
  • proxy 代理 笔记 本地mock接口webpack配置 proxy: { "/api": { target: "http://localhost:3000", changeOrigin: true, pathRewrite: {"^/api" : ""} } }

    proxy 代理 笔记

    本地mock接口webpack配置

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {"^/api" : "/mockApi"}
      }
    }
    

    CORS跨域 (node)

    var express = require('express');
    var app = express();
    var allowCrossDomain = function (req, res, next) {
    	//res.header('Access-Control-Allow-Origin', '*');
      	res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
     	res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
      	res.header('Access-Control-Allow-Headers', 'Content-Type');
      	next();
    }
    app.use(allowCrossDomain);
    
    

    webpack-plugin 实现跨域

    把前端服务和后端服务绑到一起
    安装中间件

    cnpm i webpack-dev-middleware -S
    

    在node server中

    //app.use(require('webpack-dev-middleware')(require('webpack')(require('./webpack.config.js'))))
    
    let webpack = require('webpack')
    let middle = require('webpack-dev-middleware')
    let compiler = webpack(require('./webpack.config.js'))
    app.use(middle(compiler ))
    
    展开全文
  • webpack-api-mocker是一个为 REST API创建 mockwebpack-dev-server中间件。 当您尝试在没有实际的 REST API服务器的情况下,测试您的应用程序时,这将会很有帮助。 安装 npm install webpack-api-mocker --save-...
  • 搭建vue+webpack+mock脚手架(一)

    千次阅读 2017-02-07 21:58:35
    前言仓库地址:https://github.com/miaomiaozhou/vue2-cli本文适合第一次搭建项目的朋友,讲讲我是怎么从零开始摸索着搭建一个项目框架的,属于总结归纳性质的文章。 ...| |-- pre-webpack.js | `-
  • webpack中使用mock虚拟接口模拟数据

    千次阅读 2019-02-12 19:34:42
    在实际开发中往往会有前后端进度不同的情况...webpack-api-mocker是一个webpack-dev-server 中间件,可以为REST API创建模拟。当您尝试在没有实际REST API服务器的情况下测试应用程序时,它会很有用。 安装 npm ins...
  • webpack-dev-server内添加mock server

    千次阅读 2018-05-16 03:16:37
    在开发基于api交互、前后端分离的网页应用时,经常会遇到几个问题: 前端页面已经编排好了,但是后台接口还没准备好,或者是突然出现Bug...为解决这两个问题,最简单的解决办法就是搭建一个mock server,专门返回需...
  • 1. const localmock = require('webpack-localmock') 2. vue-config.js中新增devServer commomConfig: { ... devServer: localmock({ port: '7788', //端口号 mockDir: 'mock', // response json 文件所在目录 ...
  • webpack-mock-simple 基于 的 webpack 插件 使用方式 安装 npm i webpack-mock-simple --save-dev 在 webpack 中声明 (一般是)webpack.config.js 文件中 module.exports.plugins = (module.exports.plugins || []...
  • 涉及技术应用:react 11.6,mobx,webpack,mock,mapbox,v-block-lite 项目地址:https://github.com/Eirice01/exhuman 下载地址:https://github.com/Eirice01/exhuman.git 建议使用chrom70+,npm webpac...
  • Webpack 实战: 本地 mock 开发模式实践 文章目录Webpack 实战: 本地 mock 开发模式实践前言正文1. 环境准备1.1 客户端环境:搭建 webpack 项目1.2 服务端环境:搭建 express 项目2. 接入 API2.1 基础配置信息 & ...
  • webpack-app-cli 配置webpack脚手架 用于5.27.1的webpack Webpack是当下最热门的前端资源对准管理和打包工具。它可以将许多松散的模块按照...process.env.MOCK ==='真' 目录结构 . ├── config // webpack配置文件 |
  • vue-cli+webpack搭建Mock环境,获取临时json数据下载对应的包(webpack-api-mocker)对webpack-api-mocker进行配置在根目录下创建mock文件夹创建对应的json文件结果 下载对应的包(webpack-api-mocker) 1.在项目根...
  • 1.将 data.json 文件拷贝到 sell... 2.在 webpack.dev.conf.js 中添加以下代码: 在const portfinder = require(‘portfinder’)后添加 const express = require('express') const app = express() var appData = ...
  • 本地搭建项目从0到1的过程,加深工程化水平
  • 'use strict' const utils = require('./utils'...const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebp...
  • 这是一个基于 vue 的项目,仅作学习,涉猎内容主要有: vue@2.6.10 view-design@4.1.3-rc.2 axios@0.18.1 mockjs@1.1.0 webpack@4.41.2
  • Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。 必须要...
  • vue-cli 的build的文件夹下没有dev-server.js文件,怎么配置mock数据 因为最新版本3.0的vue-cli已经放弃 dev-server.js,只需在 webpack.dev.conf.js 配置就行 下面是详细的步骤: 1.新版 webpack.dev.conf.js 配置...
  • 下面说一下具体玩法,前端使用vue-cli搭建项目,webpack打包,在后端接口未完成情况下用mock模拟假数据,使用nginx转发接口,后端使用spring框架。 本地开发: 三种情况: 1、后端接口未完成,前端使用mock...
  • webpackReact 一个带有webpack + react + redux + eslint + mock的项目

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,178
精华内容 2,471
关键字:

mockwebpack