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");
相关推荐
米花丶6 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军6 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。6 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6666 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛6 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴7 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭7 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
薄雾晚晴7 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua7 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL7 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统