VUE没有 dev-server.js文件了，而是被改成了webpack-dev-conf.js文件，后台数据模拟

最新推荐文章于 2024-11-23 20:56:58 发布

原创最新推荐文章于 2024-11-23 20:56:58 发布 · 918 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍在新版本Vue的webpack项目中如何配置本地数据请求。主要步骤包括在webpack-dev-conf.js中引入express，加载本地数据文件，并通过路由请求数据。文章详细展示了如何在devServer中使用before方法配置数据接口。

新版本vue的webpack项目里dev-server.js被替换成了webpack-dev-conf.js

所以数据请求data.json的时候直接在webpack-dev-conf.js配置即可

配置方法：

第一步：在const portfinder = require(‘portfinder’)后追加以下代码

const express = require('express')
const app = express()//请求server
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据

第二步：在devServer里面追加上before（）方法

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    // before 方法 start
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
    // before 方法 end
  },

before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }