vuecli4搭建，改造vue-cli启动项目时通过命令行工具动态选择代理地址（node命令工具实现）

摘要

1. vue-cli脚手架的安装
2. 动态选择代理地址命令配置

效果图

安装脚手架

安装全局脚手架

cnpm install @vue/cli -g  //安装脚手架，如果原有vue-cli2版本的最好先卸载2版本再安装新版，这里基于4.x版本

创建项目

vue create my-app  //创建项目，选择好版本回车即可安装。注意，项目名称不能用驼峰式命名，会报错
cd myapp //进入项目文件夹
npm run serve //启动项目

启动成功界面

动态选择代理地址命令配置

效果图：启动项目时先选择代理地址

1. 安装inquirer（一个node命令行工具）和cross-env

npm i inquirer -d
npm i cross-env -d

在根目录创建config文件夹和vue.config.js，并且在config文件夹内创建start.js和proxyMap.js文件，

2. start.js文件内容

const inquirer = require('inquirer')//引入inquirer
const {spawn} = require('child_process')//内置的属性
const proxyMap = require('./proxyMap');//代理列表

inquirer.prompt([
    //可以选择输入的，select的类型操作
    //也可以加多项选择，如果第一项选择项目，第二项选择代理地址
    // {
        // type:'list',
        // name:'project',
        // message:'⊙ 选择项目：',
        // choices:[]
    // },
    {
        type:'list',
        name:'proxy',
        message:'⊙ 选择接口代理：',
        choices:Object.keys(proxyMap)
    }
]).then(result=>{
    console.log(`代理地址: ${proxyMap[result.proxy]['/web'].target}`)
    spawn(
        'cross-env.cmd',
        [
            `PROXY_KEY=${result.proxy}`,//定义一些自己需要的字段，通过process字段访问
            'vue-cli-service',
            'serve'
        ],
        {
            stdio:'inherit'
        }
    )
    return true
}).catch(error=>{
    console.log('[debug]:error',error)
})

3. proxyMap.js文件内容

const getProxy = (target,pathRewrite = '/')=>{
    return {
        '/web':{
            target,
            changeOrigin:true,
            pathRewrite:{'^/':pathRewrite}
        }
    }
}
module.exports = {
    后端人员1:getProxy('http://172.30.2.177:8080/'),
    后端人员2:getProxy('http://172.30.2.177:8080/'),
    测试环境:getProxy('http://172.30.2.177:8080/'),
    正式环境:getProxy('http://172.30.2.177:8080/')
}

4. vue.config.js文件内容

const {PROXY_KEY} = process.env
const proxyMap = require('./config/proxyMap')
module.exports = {
    devServer: {
        proxy: proxyMap[PROXY_KEY]
    }
}

package.json文件修改script

搞定收工

启动命令为 npm run dev

最后总结：实现原理就是先执行自己的操作，再去执行vue-cli内置的启动服务