背景

在基于Vue-cli项目的产品部署中，每次都要对涉及交互的地址等配置信息进行重新打包才能生效，大大降低了效率。我们的目标是让实施项目的合作伙伴再次开心。线上实现方式都是半自动的，需要重新修改。

需求点

配置：打包后的配置文件可以修改两次，自动生成。vue-cli提供各种环境下的打包，R&D人员实现相关配置文件的自动打包毫无痛苦。对于产品R&D人员来说，不需要增加额外的包装成本，基于Vue-cli的开发习惯保持不变。

实施步骤

首先，配置是自动生成的

安装生成资产网络包插件。用于自动生成配置文件。

npminstall-save-dev generate-asset-web pack-plugin配置webpack.prod.conf.js文件。添加以下代码

//这段代码在配置文件的开头，var generatestplugin=require(' generate-asset-web pack-plugin ')；//add : strony；日期：2018 2018年12月7日Const env=require('./config/' process . env . env _ config '。env ')//打包配置文件：增加2018年12月7日；stronyvar createserverconfig=function(编译){//step1:首先复制原始对象var parse Env=object . assign({ _ hash : collection . hash }，Env) //Step2:删除配置文件对象中的引号。键(parseenv)。foreach(function(key){ parse env[key]=parse env[key]。替换(/'/g ' ')；});返回JSON.stringify(parseEnv，null，2)；}//此代码被添加到plugins:[]，new generateassetlugin({ filename 3360 utils . asset path('./static/serverconfig.json ')，fn3360(编译，CB)={CB (null，createserverconfig(编译))；}，extrafiles: []})输入npm运行build:prod打包命令。默认情况下，vue-cli提供了几种打包环境：以前的版本直接：npm运行构建

结果如下：

生成的配置文件样式如下：

{ ' _ hash ' : ' 52f 44 b 45 b5 b 600 b 7 f 36e '，' NODE_ENV': 'production '，' ENV_CONFIG': 'sit '，' BASE _ API ' : ' http://* * * * */apipplatform/'，' BASE_ADDR': 'http://****/'，' REPORT _ ADDR ' 3: ' * * * * * ' }

二：从配置文件中读取全局变量

1.添加服务器配置. json.目的是开发人员在本地开发时可以从配置文件中读取。内容Copy local dev.env.js的格式为json，去掉了多余的引号。

2.在main.js中添加以下代码目的：读取配置地址并将其装载到全局对象上

从“axios”/* ESL int导入axios-disable no-new *///请求文件内容函数getserverconfig(){ return new promise((解析，拒绝)={ axios.get(')。/static/serverConfig.json ')。然后(result={ console . log(result)const config=result . data；for(config中的const key){ Vue . prototype[key]=config[key]；} resolve()；})})}//请求文件内容并创建一个实例async函数main(){ wait getserver config()；Console.log('我的地址是' vue . prototype . base _ API)axios . defaults . base URL=vue . prototype . base _ API；//axios的基本地址从配置文件中读取new vue({ El : ' # app '，路由器，商店，template3360' app/'，components 3360 { app } })}//方法最初执行main()；3.项目执行：npm运行开发。相关的配置信息可以在浏览器的控制台下查看

4.用法：在vue文件中，直接访问和使用各种地址信息。

handleWatchLib(linurl){ window . open(this。BASE_ADDR林URL)；返回false}摘要

以上就是边肖介绍的基于Vue-Cli自动生成/拉取相关配置文件的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！