今天在公司豆芽接了一个需求,就是打包部署之后,我们可以操作修改页面的静态文字内容,并且在页面生效(不重新打包情况下),那么豆芽一接到这个需求的时候,立马想到将所有的静态文字内容,放入一个配置js中,修改文字内容我们直接修改这个配置js就可以了。这样想一想可行,在这里分享一下,欢迎一起交流不一样的方法,直接上代码。
那么首先在vue项目文件的puclic新建static/configuration.js(静态文字配置文件)

configuration.js

//figuration自己定义名字
//window对象添加自定义属性,供项目使用
window.configuration = {
    username: '曹豆芽'
}

项目引入js

在这里插入图片描述
页面使用

<template>
  <div id="home">
    <p>{{ stringData }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stringData: "",
    };
  },
  mounted() {
    this.stringData = window.configuration.name;//读取window对象赋值
  },
  created() {},
};
</script>

<style lang="scss">
</style>

在这里插入图片描述这个时候我们可以看到是正常使用的

现在我们进行正常打包,得到以下文件。
在这里插入图片描述
这个时候我们可以直接本地运行,这个时候我们运行项目想要一个环境。这里的话我使用vcode去运行打包之后的文件,也可以安装http-server去运行。

在这里插入图片描述

在这里插入图片描述

这个时候我们去修改dist/static/configuration.js文件的内容,我们发现页面会直接改变。达到我们需要的效果。
在这里插入图片描述

在这里插入图片描述
这个是豆芽想的一种方法,有不一样的想法和方法,欢迎和豆芽交流。🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐