vue打包部署文件可继续修改内容?

25 篇文章 1 订阅
8 篇文章 0 订阅

今天在公司豆芽接了一个需求,就是打包部署之后,我们可以操作修改页面的静态文字内容,并且在页面生效(不重新打包情况下),那么豆芽一接到这个需求的时候,立马想到将所有的静态文字内容,放入一个配置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文件的内容,我们发现页面会直接改变。达到我们需要的效果。
在这里插入图片描述

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

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值