vue项目开发期间,配置webpack解决后台接口在不同服务器上的问题 之 二 ( node搭建服务 )

由于今天上午 后端人员把接口都整合都一个服务器了,所以就没有硬关注 上一篇文章的问题,

晚上回来,用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"
  }
}
View Code

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'
    })
  ],
};
View Code

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'
  }
});
View Code

4、index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
View Code

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');
View Code

 

二、启动node服务,启动接口

server.js

let express = require('express')
let app  = express()

app.get('/api/name', (req, res) => {
  res.json(
    { name: "yyy user" }
  )
})

app.listen(3000)
View Code

 

server1.js

let express = require('express')
let app  = express()

app.get('/api/user', (req, res) => {
  res.json(
    { name: "wpp user" }
  )
})

app.listen(4000)
View Code

 

三、启动服务

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)
View Code

 

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': '/'
    //     }
    //   },
    // }
  },
View Code

 

1、  node server.js   

2、  npm run start         ( 启动项目 )

之后,控制台中看到 

{"name":"wpp user"}
{"name":"yyy user"}

 

猜你喜欢

转载自www.cnblogs.com/-roc/p/11986362.html