舊版本中：dev-server.js 這段去掉

var apiRoutes = express.Router() //getList apiRoutes.get('/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)}) }) //lyric 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.dataif (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)}) }) //use app.use('/api', apiRoutes)

?

在 新的 webpack.dev.config.js 中 添加

//-------------------axios 結合 node.js 代理后端請求 start const express = require('express') const axios = require('axios') const app = express() var apiRoutes = express.Router() app.use('/api', apiRoutes)//-------------------axios 結合 node.js 代理后端請求 end 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') },],},//----------------axios 結合 node.js 代理后端請求 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)})})},//----------------axios 結合 node.js 代理后端請求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,}},plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}])] })

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue 新版本 webpack 代理 跨域设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。