一、vue.config.js 常见配置
参考官网 https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
- publicPath：基本路径配置，开发时和服务器部署时根据需要进行条件判断
- lintOnSave：开发过程中保存时进行eslint语法校验
- 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 启动多个服务
- 在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)
- 在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
},
这样我们就可以根据路径起始的不同前缀来访问不同的服务接口
注意
- 当我们的不同的服务拥有自己不同的统一默认前缀时，我们只需要代理，无需使用 pathRewrite 重写属性
- 当我们的不同的服务没有自己不同的统一默认前缀时，我们需要在前端为接口路径定义不同的前缀，用来区分不同的服务，此处需要重写属性 pathRewrite 将定义的前缀重写为空，即删除掉
