0

1、看了webpack 的配置说明,但是不知道怎么使用
2、这是我在index里面做的尝试,

'use strict'
// Template version: 1.2.3
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
var express = require('express')
var app = express()
var axios = require('axios')
var apiRoutes = express.Router()

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: { //跨域。。。代理服务 
          '/api': {
                    target: 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg',
                changeOrigin: true,
                pathRewrite: {
                 '^/api': ''
                }
          }
        },
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8085, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
        autoOpenBrowser: true,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        // Use Eslint Loader?
        // If true, your code will be linted during bundling and
        // linting errors and warnings will be shown in the console.
        useEslint: true,
        // If true, eslint errors and warnings will also be shown in the error overlay
        // in the browser.
        showEslintErrorsInOverlay: false,
    
        /**
         * Source Maps
         */
    
        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'eval-source-map',
    
        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,
    
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false,
        before(apiRoutes) {
          apiRoutes.get('/lyric', function (req, res) {
              var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
              axios.get(url, {
                headers: {
                  referer: 'https://c.y.qq.com/',
                  host: 'c.y.qq.com'
                },
                params: req.query
              }).then((response) => {
                var ret = response.data
                if (typeof ret === 'string') {
                    /* \w:字母、数字、下划线   中间就是以大括号开始,小括号结束且不为( 、)的字符,一个和多个*/
                  var reg = /^\w+\(({[^()]+})\)$/ /*==> MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\...."})*/
                  var matches = ret.match(reg)
                  if (matches) {
                    ret = JSON.parse(matches[1])
                  }
                }
                res.json(ret)
              }).catch((e) => {
                console.log(e)
              })
            })
        },
        after(apiRoutes){
          apiRoutes.get('/lyric', function (req, res) {
              var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
              axios.get(url, {
                headers: {
                  referer: 'https://c.y.qq.com/',
                  host: 'c.y.qq.com'
                },
                params: req.query
              }).then((response) => {
                var ret = response.data
                if (typeof ret === 'string') {
                    /* \w:字母、数字、下划线   中间就是以大括号开始,小括号结束且不为( 、)的字符,一个和多个*/
                  var reg = /^\w+\(({[^()]+})\)$/ /*==> MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\...."})*/
                  var matches = ret.match(reg)
                  if (matches) {
                    ret = JSON.parse(matches[1])
                  }
                }
                res.json(ret)
                console.log(res.json(ret))
              }).catch((e) => {
                console.log(e)
              })
            })
        }
      },

3、

    export function getLyric(mid) {
    
      const url = '/api/lyric'
    
      const data = Object.assign({}, commonParams, {
          g_tk: 5381,
        songmid: mid,
        platform: 'yqq',
        hostUin: 0,
        needNewCode: 0,
        categoryId: 10000000,
        pcachetime: +new Date(),
        format: 'json'
      })
    
      return axios.get(url, {
        params: data
      }).then((res) => {
        return Promise.resolve(res.data)
      })
    }

4、找不到目标地址

clipboard.png

clipboard.png

5、 下面的after和before方法,不知道怎么用,起作用的就只是proxy,Please help me! Thanks very much!

clipboard.png
clipboard.png

yyccQQu 258
2017-11-28 提问
9 个回答
1

已采纳

最新的webpck用的不是dev-server而是全部在webpack.dev.conf.js里面进行配置,我和楼主一样碰到过这个问题,楼主可以补全下试试看:

app.use('/api', apiRoutes);
before(apiRoutes){ 
    apiRoutes.get('/api/lyric', function (req, res) {...})
}
2

感觉上面的全部都没有用最新的vue-cli,就瞎说

1

404 是指找不到接口,你看下接口地址有么有错

1

这些配置的东西真的算是个前端的门槛了... 之前没有怎么特意看这块的配置,刚才简单看了下

vue-cli 中 npm run dev 启动的不是 webpack 中的 devServer,所以你这里配置的 before after 肯定没有用。不要混淆了 vue-cli 的配置和 webpack 的配置!

vue-cli 中用的是 http-proxy-middleware,详见 dev-server.js。因此具体 proxy 怎么用,需要看http-proxy-middleware 的文档:https://github.com/chimurai/h...

1
  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
    noInfo: false,
    compress: true,
    host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true,
    proxy: {
      '*': {
        target: 'http://192.168.1.202',
        changeOrigin: true,
        secure: false
      }
    }
  },
1

楼主问题解决了麻烦在答案中说明一下,谢谢了

1

最新的vue-cli,跨域,你应该使用的依然是proxy去进行代理,而webpack配置这里的before和after是为了让webpack-dev-server充当服务器端使用的。图片描述

1

图片描述

1

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,
},
/**
 * axios
 */
before(app) {
  // 获取推荐页面列表
  app.get('/api/getDiscList', function (req, res) {
    var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  })
  // 获取歌词
  app.get('/api/lyric', function (req, res) {
    var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      var ret = response.data
      // 字符串转换成json对象
      if (typeof ret === 'string') {
        var reg = /^\w+\(({[^()]+})\)$/
        var matches = ret.match(reg)
        if (matches) {
          ret = JSON.parse(matches[1])
        }
      }
      res.json(ret)
    }).catch((e) => {
      console.log(e)
    })
  })
}

},

撰写答案

推广链接