vue vue.config.js常见配置、接口跨域代理和多服务配置

一、vue.config.js 常见配置

参考官网 https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

1. publicPath：基本路径配置，开发时和服务器部署时根据需要进行条件判断
2. lintOnSave：开发过程中保存时进行eslint语法校验
3. devServer：跨域配置，多服务配置

二、接口跨域代理和多服务配置

场景一，请求本地mock数据不代理

当我们在组件中请求 /get/data 时，请求：http://localhost:8080/get/data

场景二，跨域请求不同服务下的接口

根据路径起始的不同前缀，来访问不同的服务接口
当我们在组件中请求 /api/get/data 时会被代理到 http://localhost:3000/get/data
当我们在组件中请求/dev-api/post/data 时会被代理http://localhost:4000/post/data

步骤

1. 在vue.config.js中配置如下

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 基本路径
  lintOnSave: process.env.NODE_ENV !== 'production', // 开发环境，保存时进行eslint校验
  devServer: { // 跨域配置
    port: 8080, // 本地服务端口号，如果端口号被占用，会自动提升1
    host: 'localhost', //本地主机名， 127.0.0.1， 真机 0.0.0.0
    https: false, //不适应https协议
    open: true, //启动服务时自动打开浏览器访问
    proxy: {
      '/api': { // 访问时遇到 /api开头的路径，代理到此服务下
        target: 'http://localhost:3000', // 服务器跨域路径
        ws: true, // 允许 websockets协议
        changeOrigin: true, // 开启代理服务器，就会给你代理转发
        pathRewrite: {
          '^/api': '', // 将请求地址中的 /api 前缀替换成空的
          // 如果涉及很多微服务的情况，可以通过定义重写的路径来进行区分微服务
          // 有时我们需要连接本地相同路由下后端电脑的本地服务，
          //需要重写路径来指定访问后端的微服务,否则会影响到其他微服务
        },
      },
      '/dev-api': { 
        target: 'http://localhost:4000',
        ws: true,
        changeOrigin: true, 
        pathRewrite: {
          '^/dev-api': '',
        },
      },
    },
  },
}

2. express 启动多个服务

1. 在src/serve/api.js中，运行 node src/serve/api.js 启动端口3000服务

const express = require('express')
const app = express()
app.get('/get/data', (req, res) => {
    const result = {
      msg: 'express 启动后端服务',
    }
    res.json(result)
})
app.post('/post/data', (req, res) => {
  const result = {
    msg: 'express 启动后端服务',
  }
  res.json(result)
})

app.listen(3000)

2. 在src/serve/dev-api.js中，运行 node src/serve/dev-ap.js 启动端口4000服务

const express = require('express')
const app = express()
app.get('/get/data', (req, res) => {
    const result = {
      msg: 'express 启动后端服务',
    }
    res.json(result)
})
app.post('/post/data', (req, res) => {
  const result = {
    msg: 'express 启动后端服务',
  }
  res.json(result)
})

app.listen(4000)

3. 在src/utils/global.js中，配置公共路径前缀（便于维护）

// 端口3000服务器，代理前缀
Vue.prototype.$API = '/api'

// 端口4000服务器，代理前缀
Vue.prototype.$DEVAPI = '/dev-api'

3. 在组件中使用，推荐使用 `` 符号的字符串解析模式

async mockjsGet() {
      const id = { id: 1 }
      const result = await get(`${this.$API}/get/data`, id)
      this.msg = result.msg
    },
    async mockjsPost() {
      const data = { a: 1 }
      const result = await post(`${this.$DEVAPI}/post/data`, data)
      this.detail = result.msg
    },

这样我们就可以根据路径起始的不同前缀来访问不同的服务接口

注意

1. 当我们的不同的服务拥有自己不同的统一默认前缀时，我们只需要代理，无需使用 pathRewrite 重写属性
2. 当我们的不同的服务没有自己不同的统一默认前缀时，我们需要在前端为接口路径定义不同的前缀，用来区分不同的服务，此处需要重写属性 pathRewrite 将定义的前缀重写为空，即删除掉