H5页面开发笔记-动态修改打包后文件内的值

动态修改打包后文件内的值

在项目开发过程中，因为前期项目没有配置后台管理系统，所以在开发过程中有些参数是前端直接写死，但这个参数又需要修改，所以在修改后又需要重新打包发布，这样就很繁琐，于是看一些文档，还真有方法来解决这个问题。

首先了解一下vue项目中public文件夹，在该文件夹下添加的文件在打包的时候不会参与打包，所以在打包之后该文件夹下的数据不变，可以用来配置数据并对数据进行修改就会很方便。

1.如下在public中创建vueconfing.js

2.在配置文件中最好套一层立即执行函数，确保这个配置文件是在最开始执行的

3.在index.html中对config.js进行引入

小知识：vite项目默认只对type="module"的script进行打包

可能的错误：打包后的文件对vueconfig.js的访问路径可能有误，可以改为src="/vueconfig.js"。

4.在页面中如何获取变量值

  let base_url = window.configs.BASE_URL
  let actId = window.configs.VITE_NAME_ActId
  console.log(base_url)
  console.log(actId)

5.打包之后vueconfig.js文件就会在根目录上，就可以了很方便的对配置信息进行更改