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"}

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

猜你喜欢

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