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

最新推荐文章于 2024-05-20 16:08:28 发布

咦940

最新推荐文章于 2024-05-20 16:08:28 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： vue js html javascript

本文链接：https://blog.csdn.net/qq_35939417/article/details/109314892

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

在项目中遇到个需求：前端页面显示的公司名称等可以动态配置，修改完配置文件后无须重新打包项目就可以生效。我的项目是用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了。原理是什么我也不知道，因为我是个后端:)

咦940

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
Vue.js通过静态文件实现修改配置无须重新打包即可生效，以及undefined问题处理

在项目中遇到个需求：前端页面显示的公司名称等可以动态配置，修改完配置文件后无须重新打包项目就可以生效。我的项目是用webpack构建的，具体操作如下：在项目的static目录新建js文件，比如config.js.文件的内容如下：const myConfig = { showLoginLogo: false, copyRightInfo: '', companyName: ''}在index.html中引用config.js:<!DOCTYPE html><
复制链接

扫一扫

专栏目录