[TOC] ### 1. 在public/static/appConfig.json中配置通用信息 ### 2. 在utils下新建getConfig.js用于獲取數據 ~~~ import axios from "axios"; import cachedFn from "./cachedFn"; export default cachedFn(async () => { try { const { data } = await axios.get("static/appConfig.json"); const { data: mapConfig } = await axios.get( "static/mockdata/YZT_JSON/mapinit.json" ); const env = process.env.NODE_ENV; return { config: data[env], // 根據環境過濾 mapConfig, fullConfig: data }; } catch (error) { console.log(error); return Promise.reject("無法讀取配置文件的信息，請檢測是否配置正確！"); } }); ~~~ ~~~ cachedFn文件內容 /* * @Description: 緩存結果函數 [key(函數): value(該函數返回值)] * @Date: 2019-04-22 19:45:20 * @LastEditTime: 2019-04-22 20:37:30 */ export default fn => { const cacheMap = new Map(); return () => { let hit = cacheMap.get(fn); if (!hit) { const data = fn(); cacheMap.set(fn, data); return data; } return hit; }; }; ~~~ ### 3. 在src下新建initAppConfig.js調用utils/getConfig.js并將狀態傳遞給vuex ~~~ import Vue from "vue"; import store from "@/store"; import getConfig from "@/utils/getConfig"; import { SET_CONFIG, MAP_INIT_CONFIG } from "@/store/types.js"; import eyemap from "@/components/EyeMap/Map"; import { initInstance as initAxiosInstance } from "@/plugins/axios"; export default async () => { const appConfig = await getConfig(); const { config, mapConfig, fullConfig } = appConfig; // vuex 掛載 store.commit(SET_CONFIG, Object.freeze(config)); store.commit(MAP_INIT_CONFIG, Object.freeze(mapConfig)); // window 掛載 const { VERSION, NETWORK, USEPERMISSION } = fullConfig; window.__VERSION__ = VERSION; window.__NETWORK__ = NETWORK; window.__USEPERMISSION__ = USEPERMISSION; // 注冊 axios 實例 initAxiosInstance(config); // 初始化 eyemap const { ARCGISURL } = config; Vue.use(eyemap, { load: { arcgisUrl: ARCGISURL } }); }; ~~~ ### 4. 在min.js中引用initAppConfig ~~~ import Vue from "vue"; import iview from "iview"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 全局組件、指令、原型等統一注冊 import "./register"; // 引入iconfont import "./icon/iconfont/iconfont.css"; // 全局css import "./styles/global.scss"; // 引入svg import "./icon/svg"; // initConfig import initAppConfig from "./initAppConfig"; // 開發環境導入mockjs if (process.env.NODE_ENV === "development") { // 同步引入 require("@/mock"); } Vue.config.productionTip = false; // 初始化app配置文件再渲染頁面 (async () => { try { await initAppConfig(); // 掛載實例 new Vue({ router, store, render: h => h(App) }).$mount("#app"); } catch (error) { return iview.Notice.error({ title: "配置出錯", desc: error }); } })(); ~~~ ### 5. 定義vuex接收狀態 ~~~ // 配置信息 import { SET_CONFIG } from "../types"; const config = { // 命名空間 // namespaced: true, state: { config: null }, mutations: { [SET_CONFIG](state, config) { state.config = config; } }, getters: { config: state => state.config } }; export default config; ~~~ ### 6. 使用 ~~~ const { config } = store.getters; ~~~