vue3引入外部可配置文件

1,099 阅读1分钟
目的:在网站项目内添加配置文件,以实现通过配置文件控制展示效果和链接网址。

1. 项目开发环境

   vue3 + vite

2. 实现方式

  • 创建配置文件

    public文件夹内添加config.json。此文件夹内容不会被解析处理,将会直接放入打包后的dist目录中。

  • 引入配置文件

    main中引入config.json

    import dataJson from "/public/config.json
    
  • 注册全局对象

    app.config.globalProperties#用于注册能够被应用内所有组件实例访问到的全局属性的对象。

    如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。

    app.config.globalProperties = {
      ***: dataJson.***,
    };
    
  • 使用全局对象

    组件内直接用this.***的方式使用全局属性