vuecli-新版缺少devseverjs和devclientjs文件改在webpackdevconfjs设置

77次阅读

共计 1603 个字符,预计需要花费 5 分钟才能阅读完成。

在旧版本的 vue-cli 中是在 build 目录下 dev-sever.js 中添加数据接口
vue-cli 升级到 2.9.1 之后,把 webpack 升级到了 v3.6.0,里边去掉了 dev-server 和 dev-client 两个文件,改在 webpack.dev.conf.js 设置

1、找到 build 文件夹

2、找到文件,webpack.dev.conf.js 文件

3、找到 const portfinder = require('portfinder') 这句话添加下面代码

const axios = require('axios');
const express = require('express');
const apiRoutes = express.Router();

4、找到 const devWebpackConfig=merge(baseWebpackConfig,{} 里面的 devServer 添加代码

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true})
  },
  // 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 方法
    before (apiRoutes) {apiRoutes.get('/api/getDiscList', (req, res) => {
        // 这里是要链接的 api 地址
        const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
        axios.get(url, {
          headers: {
            // 配置 api 地址 referer
            referer: 'https://c.y.qq.com/',
            // 配置 api 地址 host
            host: 'c.y.qq.com'
          },
          params: req.query  // 这是请求的 query 
        }).then((response) => {
          // response 是 api 地址返回的,数据在 data 里。res.json(response.data)
        }).catch((e) => {console.log(e);
        })
      });
      app.use('/api', apiRoutes);
    }
  }

正文完
 0