由于今天上午 后端人员把接口都整合都一个服务器了，所以就没有硬关注 上一篇文章的问题，
晚上回来，用node搭了一个简单服务器，测试了下，是没有问题的。代码如下：
一、 自己初始化项目，
1、package.json
{
"name": "es",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"csv-loader": "^3.0.2",
"express": "^4.17.1",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2",
"xml-loader": "^1.2.1"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
2、webpack.common.js
const path = require(‘path‘);
// const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: {
app: ‘./src/index.js‘
},
output: {
filename: ‘[name].js‘,
path: path.resolve(__dirname, ‘dist‘)
},
devServer: {
proxy: {
‘/yyy‘: {
target: "http://localhost:3000",
changeOrigin: true,
pathRewrite: {
‘^/yyy‘: ‘/‘
}
},
‘/wpp‘: {
target: "http://localhost:4000",
changeOrigin: true,
pathRewrite: {
‘^/wpp‘: ‘/‘
}
},
}
},
plugins: [
// new CleanWebpackPlugin([‘dist‘]),
new HtmlWebpackPlugin({
title: ‘Production‘
})
],
};
3、webpack.dev.js
const merge = require(‘webpack-merge‘);
const common = require(‘./webpack.common.js‘);
module.exports = merge(common, {
devtool: ‘inline-source-map‘,
devServer: {
contentBase: ‘./dist‘
}
});
4、index.html
<!doctype html> <html> <head> <title>起步</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./src/index.js"></script> </body> </html>
5、src/index.js
function axios(api){
let xhr = new XMLHttpRequest();
xhr.open("get", api, true);
xhr.onload = () => {
console.log( xhr.response )
}
xhr.send()
}
axios(‘/wpp/api/user‘);
axios(‘/yyy/api/name‘);
二、启动node服务，启动接口
server.js
let express = require(‘express‘)
let app = express()
app.get(‘/api/name‘, (req, res) => {
res.json(
{ name: "yyy user" }
)
})
app.listen(3000)
server1.js
let express = require(‘express‘)
let app = express()
app.get(‘/api/user‘, (req, res) => {
res.json(
{ name: "wpp user" }
)
})
app.listen(4000)
三、启动服务
1、 node server.js
2、 node server1.js 或可以在webpack中配置
3、 npm run start ( 启动项目 )
之后，控制台中看到
{"name":"wpp user"}
{"name":"yyy user"}
以上为不同接口在不同服务器时，当合并到一个服务器时
如 server1.js 合并到 server.js
let express = require(‘express‘)
let app = express()
app.get(‘/api/name‘, (req, res) => {
res.json(
{ name: "yyy user" }
)
})
app.get(‘/api/user‘, (req, res) => {
res.json(
{ name: "wpp user" }
)
})
app.listen(3000)
webpack.common.js 可以改成这种配置
devServer: {
proxy: [{
context: [‘/yyy‘, ‘/wpp‘],
target: "http://localhost:3000",
pathRewrite: {
‘^/yyy‘: ‘/‘,
‘^/wpp‘: ‘/‘
}
}]
// proxy: {
// ‘/yyy‘: {
// target: "http://localhost:3000",
// changeOrigin: true,
// pathRewrite: {
// ‘^/yyy‘: ‘/‘
// }
// },
// ‘/wpp‘: {
// target: "http://localhost:4000",
// changeOrigin: true,
// pathRewrite: {
// ‘^/wpp‘: ‘/‘
// }
// },
// }
},
1、 node server.js
2、 npm run start ( 启动项目 )
之后，控制台中看到
{"name":"wpp user"}
{"name":"yyy user"}
vue项目开发期间，配置webpack解决后台接口在不同服务器上的问题 之 二 （ node搭建服务 ）
原文：https://www.cnblogs.com/-roc/p/11986362.html