vue项目打包发布后修改配置文件仍然生效的方案(以Vue3为例)

vue项目打包发布后修改配置文件仍然生效的方案(以Vue3为例)

使用json,并且要用ajax来加载;应用过程中也有一些注意的问题。

有关"vue3项目发布后修改配置文件仍然生效"问题,之前做过一篇笔记《vue项目读取全局配置》。但事实上,那篇笔记的步骤,只解决了项目发布后,配置文件没有被压缩,仍然可见可编辑的问题;但配置文件编辑保存后,并没有生效,也就是说,改了也是白改,一点意义都没有。

那篇笔记中,配置文件是js文件,使用import的方式。结果项目发布后,估计打包程序做了处理,直接将里面的内容读出来,内联到每个使用它的组件中去了,所以后面再改配置文件不会起作用。

vue发布时,应该是可以指定参数,使用不同的配置文件发布。但这总比不上可以修改配置文件方便。你总不能,因为生产环境有所改变,又重新发布一个吧。一是不方便,二是有时做不到。所以还是要看看,如何做到发布以后,还能修改配置文件。

一种方法是改用json作为配置文件,然后在项目中使用ajax或者require的方式对它进行读取。具体如下:

1、创建配置文件

2、在主程序中读入配置文件

3、组件中使用配置

4、库类型文件使用require方式读入配置

1、创建配置文件

在项目的public目录下创建一个json文件作为配置文件,如命名为web-config.json。网上有文章说不要将配置文件命名为config.json,也没说明理由。因为时间有限,姑妄听之,我在前面加了个"web-"前缀。内容比如:

public/web-config.json

json 复制代码
{
  "app": {
    "name": "订餐拿饭抓阄系统",
    "owner": "大甲研究院",
    "developer": "乙丙丁有限公司"
  },
  
  "server": "http://10.0.1.8:8090",
  
  "power": {
    "minA": 0,
    "maxA": 5000,
    "defaultMinA": 1000,
    "defaultMaxA": 2500
  }
}

2、在主程序中读入配置文件

main.js

js 复制代码
import axios from "axios";

// 使用配置
loadConfig().then((config) => {
  const app = createApp(App);

  app
    .use(store)
    .use(router)
    .mount("#app");

  app.provide("globalConfig", config);
});

// 加载配置
async function loadConfig() {
  const response = await axios.get("/web-config.json");
  return response.data;
}

3、组件中使用配置

在main.js中,使用了provide的方式,共享了配置。

js 复制代码
app.provide("globalConfig", config);

所以在组件中,很自然就用inject的方式注入配置:

js 复制代码
import { inject } from "vue";

const appConfig = inject("globalConfig");

4、库类型文件使用require方式读入配置

3是在组件中,即*.vue文件中使用。如果是类似库文件这类的js,该如何使用这些配置?答案是需要直接require该配置文件。也就是说,无法享用共享的配置,需要自己再次读取。如:

vue.config.js

js 复制代码
const appConfig = require("./public/web-config.json");
相关推荐
vvilkim12 分钟前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头2 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz2 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子2 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边2 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客2 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua2 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8882 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家2 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试