During vue project development, configuration webpack solve two problems at the interface of the background on a different server (node build a service)

Since this morning, the back-end staff to have a server interfaces are integrated, so there is no question of an article on the hard attention,

Come back at night, take a node with a simple server, the next test, there is no problem. code show as below:

First, initialize yourself project,

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,
        Pthriawrite: {
          '^/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

Second, the start node service, start Interface

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

Third, start the service

1、 node server.js

2, node server1.js or may be arranged in the webpack

3, npm run start (start the project)

After that, see the console

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

When the server is different than when the different interfaces into one server

The server1.js incorporated 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

This configuration can be changed 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 (start the project)

After that, see the console

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

During vue project development, configuration webpack solve two problems at the interface of the background on a different server (node build a service)

Guess you like