vue 启动项目时动态切换 ip

一般我们在开发的过程中，根据部署的环境不同可能会使用多个ip，这时候就需要到配置文件中更改ip，然后重启项目，但是这样做会有点麻烦，不仅要修改配置文件，还需要重启项目。如果能够在启动项目时根据不同的命令切换不同的ip，那岂不是很舒服。
1、初始化一个项目（我是使用的 vue-cli3）

2、新建 src/config/env.json，执行 npm run serve，查看 env.json 中的变化，会发现多了点内容

3、在项目根节点（和 package.json 同级）新建 vue.config.js 文件，写入如下内容：

// 引入 node 自带的操作文件的插件 fs
const fs = require("fs")

module.exports = {
  configureWebpack: () => {
    // writeFileSync 是写向文件写入内容的方法
    // process.env 是vue的环境变量，是一个vue自带的固定的参数
    // apiconfig 是在 package.json 中定义的一个变量名，可自定义
    // trim() 是为了去掉自动加到变量值上的空格
    fs.writeFileSync("./src/config/env.json", JSON.stringify({env: process.env.apiconfig.trim()}))
  }
}

4、修改 package.json 中 scripts 节点内的命令

"scripts": {
    "serve": "set apiconfig=serve && vue-cli-service serve",  // 这个是默认的
    "serve-test": "set apiconfig=serve-test && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

注意：

• apiconfig=serve-test 中间不能有空格
• serve-test：自定义启动命令
• 默认的 serve 也要设置 apiconfig=serve，不然执行时 vue.config.js 中的 configureWebpack 会报错

5、新建 src/config/base_ip.js，根据不同的命令导出不同的 ip

// 引入 env.json 文件，因为每次启动项目时，会自动写入输入的命令，这样我们就可以动态控制 ip
import env from './env.json'

const base_ip_config = {
  // 开发环境
  "serve": {
    base_ip: 'http://192.168.3.174'
  },
  "serve-test": {
    base_ip: 'http://192.168.4.170'
  },
  // 生产环境
  "build": {
    base_ip: 'http://192.168.4.174'
  }
}

export default base_ip_config[env.env]

6、在需要 ip 的地方引入 base_ip.js，这里我们先在 app.vue 中打印一下，验证效果

<script>
import HelloWorld from './components/HelloWorld.vue'

// 引入我们刚才的 base_ip.js
import base_ip_config from '@/config/base_ip.js'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
  	// 控制台输出动态获取的 ip
    console.log(base_ip_config);
  },
}
</script>

7、执行命令
当执行 npm run serve 时，控制台输出

当执行 npm run serve-test 时，控制台输出

8、打包命令同理

所以，我们成功了。
打包命令同理，接下来就可以愉快地进行开发了

最后要感谢这位大哥：https://www.cnblogs.com/songzxblog/p/13331202.html