vue 前端灵活改变后端地址-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 前端灵活改变后端地址。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue 前端灵活改变后端地址

起因：
我们在做项目时；很多时候会遇到后台地址变动，不管是在打包或者是开发中；每一次后台开机启动或者换电脑启动后台，后台地址都会随之变动；而这种情况；每次后台改动前端就要去找地址跟着改；开发还好，实际应用时，每次都要改了之后再打包；频繁打包就很麻烦。有没有什么方式可以直接修改后台地址呢？当然有，该文就是提供一种方便的处理方式。
使用：
第一种方式：
1.我们在脚手架的public文件夹中新建一个js文件，用于存储后台地址配置：
示例 config.js 文件：

module.exports = {
    interfaceIP: "http://xxxxxx",
    // interfaceIP: "http://xxxxxxx",
};

2.在 vue.config.js 中引入 config.js：
这个地方要注意一下，因为vue.config.js是在Node.js环境下执行的，而不是在浏览器环境下执行，所以要用Node.js中的require语法。

const interfaceIP = require("./public/config");

然后后台代理地址

devServer: {
    //本机地址
    host: 'localhost',
    //获取port端口
    port: port,
    // 端口配置
    // port: 1888,
    // 反向代理配置
    proxy: {
      //process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，
      //如读取的数据是'/api',那么意思就是前端请求的/api路径都会被带来到，参数target的地址
      [process.env.VUE_APP_BASE_API]: {
        /* 服务器5866 本地电脑5566 */
        target: interfaceIP.interfaceIP,
        //代理的路径
        // target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允许跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }

然后我们在打包的时候就可以看到dist里面有一个config.js 文件，就可以在这个文件中修改地址了；
第二种方式：
第二种就不是直接修改地址了，而是配置环境地址；使用环境变量来设置后台代理地址。在src的同一级新建.env.development文件；在里面配置好需要的多个后台地址。
示例代码如下：文章来源地址https://www.toymoban.com/news/detail-811175.html

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
     [process.env.VUE_APP_BASE_API]: {
        /* 服务器5866 本地电脑5566 */
        //代理的路径
       	target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允许跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }
};

// .env.development
# 开发环境配置
ENV = 'development'

#设置端口号
port = 8080 

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
VUE_APP_BACKEND_URL = http://XXXXXXXXXXX