Vue.js通过静态文件实现修改配置无须重新打包即可生效,以及undefined问题处理

在项目中遇到个需求:前端页面显示的公司名称等可以动态配置,修改完配置文件后无须重新打包项目就可以生效。我的项目是用webpack构建的,具体操作如下:

  1. 在项目的static目录新建js文件,比如config.js.文件的内容如下:
const myConfig = {
  showLoginLogo: false,
  copyRightInfo: '',
  companyName: ''
}
  1. 在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>

这里的路径一定要用绝对路径!!!

  1. 在代码里通过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了。原理是什么我也不知道,因为我是个后端:)

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页