多个服务vue.config.js的配置

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

多个服务vue.config.js的配置

vue.config.js

module.exports = {
    runtimeCompiler: true,
    publicPath: '/', //设置打包路径
    devServer: {
        host: 'local-sys.zzz.cn',
        port: 10100,
        open: true,
        https: false,
        // 设置开发接口代理
        proxy: {
            // 服务一
            "/ssoapi/v1": {
                target: 'http://inbbb-common-hrssomanager:81/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/ssoapi': '/api'
                },          
            },

            // 服务二
            "/api/v1": {
                target: 'http://10.10.2.173:8080',
                ws: true,
                changeOrigin: true,
            },
        },
    }
}

.vue

<script>
import axios from 'axios'
export default {
    data(){
        return {
            userName: ''
        }
    },
    created() {
        this.getUserMessageSso()
    },
    methods: {
        getUserMessageSso(){  
            axios({
                method: 'GET',
                url: '/ssoapi/v1/user'
            }).then(res => {
                this.userName = res.data.uid
                // console.log(res.data.uid);
            })
        },
    }
}
</script>

注：一个项目多个服务，在vue.config.js的proxy里配置，在axios的url为 ‘/ssoapi/v1/user’ ，当请求遇到该路径，就会转化为该服务的target，但是这个接口正常路径依旧是api而不是ssoapi，所以这里需要通过pathRewrite再次将ssoapi转化为api。

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