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");
相关推荐
灵感__idea1 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端