多个代理地址以及打包问题解决

先解决代理问题在解决打包多个地址问题

注解：前端做代理只是在本地打包的时候不会打包进去   这跟你最后的上线域名有关（但是多个后端提供地址就需要前端处理一个）

1.多个代理地址

注意：这只是本地的代理 打包的时候地址多个的话请看下边的配置环境

// 在vue.config.js内设置方向代理解决跨域的问题（同时也可以代理多个 但是要注意代理的名称不要用占用名）
// 解决跨域，vue自动生成代理服务器【反向代理】
module.exports = {
    devServer: {
        //设置代理
        proxy: {
            '/api': {
                target: 'http://localhost:3000', //要代理的地址
                pathRewrite: { //重写，如果有 api 就将api重写为空
                    '^/api': ''
                }
            }，
            '/text': {
                target: 'http://localhost:3000', //要代理的地址
                pathRewrite: { //重写，如果有 text就将text重写为空
                    '^/text': ''
                }
            }，
        }
    }
}

2.配置环境

配置以下代码上边的代理就可以照常代理一个地址了（代理最后上线用的域名地址）

创建三个文件（文件一定要与package.json同级）

.env.dev    本地地址

.env.prod     正式地址（生产环境）

.env.text     测试地址

每个文件内写

 

 

也可以自己命名但是得与后面我们用到时的名字同步

 NODE_ENV='text'

 在package.json文件中配置

为的是让启动时走我们封装的地址（启动时按照咱们配置的启动如 npm run serve:dev )

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:prod": "vue-cli-service serve --mode prod",
    "serve:text": "vue-cli-service serve --mode text",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod",
    "build:text": "vue-cli-service build --mode text"
  },

 接着在config文件夹内创建evn.js文件如果没有config文件夹就创建一个（要与依赖包同级）

 在evn.js内粘贴以下代码（记得更改对应地址）

这里的地址在启动时就会调用所以启动时也需要按照咱们配置的来启动（如：npm run serve:dev 启动本地）

const env = process.env
let baseUrl = ''
if (env.NODE_ENV == 'dev') {
    // 本地地址
    baseUrl = '本地地址'
}else if(env.NODE_ENV == 'prod'){
    // 线上地址
    baseUrl = '线上地址'
}else if(env.NODE_ENV == 'text'){
    // 测试地址
    baseUrl = '测试地址'
}
export {
    baseUrl
}

接下来就可以在封装的api请求接口处引用了

注解：我这里是自己封装的api可根据自己的情况来进行引入拼接使用

import { baseUrl } from '../../config/env.js'

在接口处拼接上去就可以了（打包的时候这个地址也不需要动）

export function common_register(data){

    return request({

        url:baseUrl+'/common_register',

        method:'post',

        data

    })

}

好啦到这里也就完成了