在项目中遇到个需求:前端页面显示的公司名称等可以动态配置,修改完配置文件后无须重新打包项目就可以生效。我的项目是用webpack构建的,具体操作如下:
- 在项目的static目录新建js文件,比如config.js.文件的内容如下:
const myConfig = {
showLoginLogo: false,
copyRightInfo: '',
companyName: ''
}
- 在index.html中引用config.js:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="/static/config.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<link rel="icon" type="image/x-icon" href="/static/fav.ico">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
</head>
<body style="background: #f1f4f8;">
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这里的路径一定要用绝对路径!!!
- 在代码里通过myConfig.XXX来获取自定义配置,比如:
myConfig.companyName
这里分享一下我遇到的坑。一开始我在index.html里引入config.js时用的是相对路径,如下:
<script type="text/javascript" src="./static/config.js"></script>
当访问的页面URL是http://localhost:8080/XXX时,可以获取到myConfig变量;当访问的页面路径是http://localhost:8080/XXX/XXX时,获取myConfig 报错undefined。引用js时改成绝对路径就OK了。原理是什么我也不知道,因为我是个后端:)