vue读取全局配置

admin
html
3天前
14热度
0评论

创建全局配置文件public/static/config.js

window.config = {    
    androidUrl:"https://Android-arm64.apk",
    googleplayUrl:"#",
    appsoreUrl:"#",
    windowsUrl:"#",
    macUrl:"#",
}

在index.html中引入js

<head>
    <script type="module" src="/static/config.js"></script>
  </head>

在需要的vue中可以直接使用

<script setup>
    import { ref } from 'vue';
    let downUrls = ref(window.config)
    console.log(downUrls.androidUrl);
</script>

          <div class="download-icon">
            <a :href="`${downUrls.appsoreUrl}`" >
              <img src="../../assets/images/down_appstore.svg" alt="">
            </a>
            <a :href="`${downUrls.googleplayUrl}`" >
              <img src="../../assets/images/down_googleplay.svg" alt="">
            </a>
            <a :href="`${downUrls.androidUrl}`" >
              <img src="../../assets/images/down_android.svg" alt="">
            </a>
            <a :href="`${downUrls.windowsUrl}`" >
              <img src="../../assets/images/down_windows.svg" alt="">
            </a>
            <a :href="`${downUrls.macUrl}`" >
              <img src="../../assets/images/down_mac.svg" alt="">
            </a>
          </div>

或

      <div class="footer-right">
        <ul>
          <li v-for="(v, i) in footerlist" :key="i">
            <p>{{ v.title }}</p>
            <div v-for="(item, j) in v.list" :key="j" @click="clickFoot(i,j)">{{ item.label }}</div>
          </li>
        </ul>
      </div>

export default {
  setup() {
    const footerlist = ref([
      {
        title: '软件下载',
        list: [{label:'Android', type:1, data:window.config.androidUrl}, {label:'IOS', type:1, data:window.config.appsoreUrl}, {label:'Windows', type:1, data:window.config.windowsUrl}, {label:'macOS', type:1, data:window.config.macUrl}]
      },
  },
methods: {
    scrollToElement(refID) {
      // this.$nextTick(() => {
      //   const element = document.getElementById("service");
      //   console.log(element);
      //   this.$refs.service.$el.scrollIntoView({ behavior: 'smooth' });
      // });
      let time=setTimeout(()=>{
          this.$nextTick(()=>{
            let top=0;
            let targetElement=document.getElementById(refID);
            if(targetElement){
            // 获取元素距离顶部的距离
              top=targetElement.offsetTop;
            }
            if(top>0){
            // 滚动到指定位置
              window.scrollTo({
                top: top,
                behavior: 'smooth'
              });
            }
            clearTimeout(time);
            time=null;
          })
        },300);
    },
    clickFoot(i,j) {
      let clickData = this.footerlist[i].list[j];
      //type,1:打开新的连接，2:跳转到页内指定位置，3:跳转网站内路由页面
      switch(clickData.type){
        case 1:
          if( clickData.data && clickData.data != "" ){
            window.open(clickData.data, '_blank');
          }
          break;
        case 2:
          this.scrollToElement(clickData.data);
          break;
        case 3:
          this.$router.push(clickData.data);
          window.scrollTo(0, 0);
          break;
      }
      console.log(i,j, this.footerlist[i].list[j].label);
    },
}

</script>

一、需求及思路
我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。

对于VUE项目来说，咋弄？vue页面无须多言，假如存在一个配置文件，直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办？这是一个静态页面。

我查了许久，然后按这样的思路捣鼓：
1、建立一个配置文件public/config/index.js
2、vue.config.js中读取这个配置文件，用于/public/index.html
3、vue页面也直接读取这个配置文件

二、配置文件
/public/config/index.js

exports.app = {
  name: "订餐谁拿饭抓阄系统",
  owner: "一群饭桶",
  developer: "蓬蓬养猪场",
};

三、vue.config.js读取配置文件及public/index.html使用配置
1、在vue.config.js里面，首先读出配置，然后在chainWebpack里写入该配置项。

const appConfig = require("./public/config");

module.exports = {
  。。。
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = appConfig.app.name;
      return args;
    });
  },
。。。
};

2、/public/index.html
title使用配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>

四、vue页面读取配置文件

import appConfig from "/public/config";

export default{
    data(){
        appName: appConfig.app.name
    }
}