Vue项目开发中优雅的切换服务端ip

最新推荐文章于 2024-01-19 16:05:58 发布

妙木山村民

最新推荐文章于 2024-01-19 16:05:58 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_35665506/article/details/106906516

本文介绍在Vue开发过程中，如何优雅地切换服务端IP，避免手动修改配置文件。通过解析命令行输入的IP，配置vue.config.js，并提供一个交互式的命令行选择列表，简化在多个服务端之间切换的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目开发中优雅的切换服务端ip

在进行Vue开发的时候，需要配置项目对应服务端的ip地址，但如果需要在多个服务端间进行切换，通常的做法是:手动修改vue.config.js配置文件中的服务端ip并保存，然后重启前端服务。如果一个前端项目所有接口都由同一个服务端提供的情况下，现在提供一个非常简单而且也很优雅的切换服务端ip的方法以供参考。

解析获取命令行中输入的服务端ip

需要在项目的中创建一个server-ip.js文件，用于解析命令行中输入的参数，目前主要是为了获取命令行中输入的服务端ip,并将获取得到的ip暴露出去。

/**
* server-ip.js
**/
const configArgv = JSON.parse(process.env.npm_config_argv)

const original = configArgv.original.slice(1);

const ip = original[1] ? original[1].replace(/-/g,''):''

module.exports = ip;

配置vue.config.js

vue.config.js文件中引用server-ip.js即可:

/**
* vue.config.js
**/

const BASE_URL = process.env.NODE_ENV === 'development' ? '/' : './';
//引用server-ip.js文件获取命令行中输入的ip地址
const serverIP = require('./server-ip.js')</