如何做到webpack打包vue-cli 2.x和3.x项目后，直接修改配置文件公司的系统是需要项目部署的实施人员拿到客

问题初衷

解决问题的初衷，源于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下。然而我们的系统需要频繁的更改服务器地址，但是项目代码又不需要做更改。

公司的系统是需要项目部署的实施人员拿到客户处部署之后。才知道真正的请求路径等信息。
实施人员不懂前端打包，也不懂前端代码，修改难度很大。
需要部署的客户数量很多，每次都是需要单独部署

解决思路

要是实施人员不用动开发源码，以及重新build项目，只是单纯的修改项目中某个文件内部的变量，那么将大大降低项目部署的难度。因为就查了很多博客，还真的有这样的方案，直接在项目中增加一个请求配置的js这个方法，我就懒得说了，下面主要说说，运用generate-asset-webpack-plugin插件的方法。然后项目主要是用vue开发的，vue-cli 2.x和vue-cli 3.x都记录一下，网上主要是2.x的方法。

解决方法

vue-cli 2.x的方法

先安装generate-asset-webpack-plugin插件

npm i generate-asset-webpack-plugin -D

在webpack.prod.conf.js里面配置

//让打包的时候输出可配置的文件
const GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 

const createServerConfig = function(compilation){
  let cfgJson = { ApiUrl: "http://110.53.141.72:81/gateway-pain/api/"};
  return JSON.stringify(cfgJson);
}

// 然后在plugins下面，new一下插件实例
plugins：[
    new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })
]

在封装请求的文件里面提前请求一下serverconfig.json文件内部的配置

import axios from 'axios'

// 获取配置文件内的配置
let base_url;
axios.get("serverconfig.json").then((res)=>{
    base_url = res.data.ApiUrl; // 注意获取到配置内容存在response的data里面
}).catch((error)=>{console.log(error)});

// 创建axios实例
const service = axios.create({
    baseURL: base_url, // process.env.BASE_API
    timeout: 10000, // 请求超时时间
})

... 下面可继续对axios的封装

执行build打包之后，你会看到和index同级，生成一个serverconfig.json文件

文件的初始内容就是在webpack.prod.conf.js文件内的初始配置，展开后就是

{ApiUrl: "http://110.53.141.72:81/gateway-pain/api/"}

开启服务之后，可以看到，ApiUrl值已经可以拿到，那么vue-cli 2.x配置就走完了

vue-cli 3.x的方法

跟2.x一样

在vue.config.js内部进行修改

由于vue-cli 3.x将webpack的配置隐藏，如果想要修改初始配置，需要在根目录下新建vue.config.js文件,内容跟在webpack.prod.conf.js一样，只是写的位置有点变化，

// vue.config.js文件内部

const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const createServerConfig = function(compilation){
    let cfgJson = {ApiUrl: "http://110.53.141.72:81/gateway-pain/api/"};
    return JSON.stringify(cfgJson);
}

module.exports = {
    configureWebpack: { // 注意这是放在configureWebpack的plugins里面进行扩展
        plugins: [
          new GenerateAssetPlugin({
            filename: 'serverconfig.json',
            fn: (compilation, cb) => {
                cb(null, createServerConfig(compilation));
            },
            extraFiles: []
          })
        ]
    },
}

如上就算配置完了，build出来的效果跟前面也一样。

总结

2.x 和 3.x总体的差异在语法上其实熟悉了之后，觉得好像也没有那么难懂，这次的记录，也主要是供其他小伙伴查阅，写的比较草率，凑合看看吧，这次没写实例项目了，主要觉得没必要，有好的建议，还是说说呗，虽然我不一定会改，心情好，我还是会的，哈哈哈哈~~~ 刚好下班，完美，1024，愿所有程序无bug，愿程序员永远不加班