前端项目如何添加配置文件

最近碰到一个需求，公司两个独立的项目，其中A项目需上报埋点数据给B项目，因为两个项目完全独立，部署的服务器不一样，参与的开发人员，测试也都不一样，其中接收上报数据的路径也可能经常发生变化，为避免这些无伤大雅的修改都要走回开发人员手中，故将一些参数作为配置项，以便测试或实施的同事按情况修改。

前端项目采用Vue框架，由Webpack打包，此为背景。

因为项目被打包后，代码结构难以区分，也不支持实时修改，为添加一个可以build后可实时修改生效的配置文件，在此，我用到了generate-asset-webpack-plugin插件。

下面是具体工程：

(1)安装generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

(2)在webpack的配置文件webpack.prod.conf.js中引用该插件

var GenerateAssetPlugin = require('generate-asset-webpack-plugin');

(3)在项目根目录创建serverConfig.json文件，内容为需要添加的配置项，比如我的是:

因为json文件不支持注释，故前两项是注释，以下划线区别(这也是我觉得用json文件作为配置项很不合适的一方面啊！！！)

{"_isReport": "埋点开关，true为开，false为关","_reportPath": "埋点上报路径","isReport": true,"reportPath": "http://192.168.2.103:8092",
}

(4)引入添加的serverConfig.json文件

const serverConfig = require('../serverConfig.json')

(5)添加打包时写入配置文件的代码

const createJson = function(compilation) {return JSON.stringify(serverConfig);
};

(6)添加打包时输出配置文件的代码

var webpackConfig = {plugins: [new GenerateAssetPlugin({filename: 'serverConfig.json',         // build后生成的配置文件名字及路径设置fn: (compilation, cb) => {cb(null, createJson(compilation));}})]// other webpack config ...}

(7)在main.js中添加读取build之后的代码

Vue.prototype.$axios.get('serverConfig.json').then((result)=>{Vue.prototype.config = result; //设置成Vue的全局属性}).catch((error)=>{console.log(error)})

(8)在代码中打印配置项

console.log(this.config.reportPath)

(9)npm run build,打包后的目录结构如下

注意项：

有可能因为你的其他插件配置的原因，最后生成的serverConfig.json不一定在dist目录下，而是在static目录下，也没有关系的，一样可以修改后生效，如果觉得不方便看的话，可以在插件配置filename那里去更改路径。

前端项目如何添加配置文件相关推荐

[项目]Vue+ElementUi疫情监测平台纯前端项目(一)添加数据
疫情防控平台搭建项目展示先把git贴上吧喜欢的可以拉下来研究研究 https://gitee.com/shang_dynasty/yiqing.git 一个登录框没什么好说的分页体温处于& ...
React、Vue等前端项目彻底卸载ServiceWorker，亲测有效
前端项目遇到的问题每次前端项目在本地开发没事,一旦发布到线上就需要用户手动清理浏览器缓存,让用户总是吐槽,百度搜了很多文章都没找到解决方案,最终在钉钉源码中找到了解决方案.话不多说,直接上图: 1. ...
Vue项目搭建常用配置文件！
1.前端跨域解决方案 request.js用来请求数据,封装的代码如下: request.js :在vue/src/utils 之下 ~ import axios from 'axios'const ...
如何为前端项目一键自动添加eslint和prettier的支持
本文来自读者@那个曾经的少年回来了写的源码共读35期笔记文章,授权投稿,写的真好. 本文参加了由公众号@若川视野发起的每周源码共读活动,点此加我微信 ruochuan12 了解详情一起参与. 本文 ...
gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
gulp + webpack 构建多页面前端项目 1
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
git前端工程实现ci_大前端项目代码重用，也许lerna是最好的选择
我前段时间参与了一个react为主的大前端项目,覆盖Web.Android.Ios三个平台.由于整个业务逻辑侧重在手机端,且Web端也是到了项目中期才开始启动,我在搭底层框架时就没有考虑用类似reac ...
js 读取json文件_JavaScript 项目中常见配置文件介绍
原文地址:https://github.com/whinc/blog/issues/14 本文介绍一些前端项目的通用配置及相关资源,以便你了解项目中常见配置的含义以及配置方式. .gitignore ...
使用各种姿势舒服的部署微前端项目（上：打包与上传）
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力. 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了 ...

前端项目如何添加配置文件

前端项目如何添加配置文件相关推荐

最新文章

热门文章