郑州网站推广排名,中国专业的网站建设,wordpress管理员登录,宿州推广公司使用json#xff0c;并且要用ajax来加载#xff1b;应用过程中也有一些注意的问题。
有关“vue3项目发布后修改配置文件仍然生效”问题#xff0c;之前做过一篇笔记《vue项目读取全局配置》。但事实上#xff0c;那篇笔记的步骤#xff0c;只解决了项目发布后#xff0c…使用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
{app: {name: 订餐拿饭抓阄系统,owner: 大甲研究院,developer: 乙丙丁有限公司},server: http://10.0.1.8:8090,power: {minA: 0,maxA: 5000,defaultMinA: 1000,defaultMaxA: 2500}
}2、在主程序中读入配置文件
main.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的方式共享了配置。
app.provide(globalConfig, config);所以在组件中很自然就用inject的方式注入配置
import { inject } from vue;const appConfig inject(globalConfig);4、库类型文件使用require方式读入配置
3是在组件中即*.vue文件中使用。如果是类似库文件这类的js该如何使用这些配置答案是需要直接require该配置文件。也就是说无法享用共享的配置需要自己再次读取。如
vue.config.js
const appConfig require(./public/web-config.json);
