关于Vue使用Mock接口报404的问题

导读:本篇文章讲解 关于Vue使用Mock接口报404的问题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

关于Vue使用Mock接口报404的问题

初次在Vue中使用Mock的时候,引用了网上的常用做法:在根目录的vue.config.js文件下引用:

module.export = {
    lintOnSave: false,
    devServer: {
        // before: require('./mock/index.js')
        before(app) {
            console.log('before ')
            app.get("/user/info", (rep, res) => {
                console.log('in mock')
                var json = {
                    name: 'hh',
                    age: 24
                }
                res.json(Mock.mock(json))
            })
        }
    }
}

但最终不管我怎么引用,都无法正常调用接口*/user/info*,总是报404。

尝试了很久,终于发现我的启动命令 npm run dev中 ,在package.json中的命名是:

scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
  },

因此我直接找到webpack.dev.conf.js文件,添加:

before: app => {
      console.log('before ')
        app.get("/user/info", (rep, res) => {
            console.log('in mock')
            var json = {
                name: 'hh',
                age: 24
            }
            res.json(Mock.mock(json))
        })
    }

添加位置在:

// cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  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: app => {
      console.log('before ')
        app.get("/user/info", (rep, res) => {
            console.log('in mock')
            var json = {
                name: 'hh',
                age: 24
            }
            res.json(json)
        })
    }
    
  },
  plugins: [

然后再调用接口*/user/info*,调用正常

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/81584.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!