根目录创建config/config.json

{
    "url": "http://xxx.xxx.1.231:xxxx",
    "debug": false
}

方法一

App

在vue中因为在menu.js中，挂在了App.vue，所以App.vue最先被渲染

OS

读取系统信息 nodejs.cn/api/os.html…

<template>
	<div id="app">
		<router-view />
	</div>
</template>
<script>
	import os from "os";
	import $store from "@/store/index";
	import { readJson } from "./utils/tool";
	export default {
		created() {
			// 返回当前系统
			let platform = os.platform();
			// 返回主机名
			let hostname = os.hostname();
			
			let config = readJson("config/config.json");
			if (config && config.url) {
				this.ajax.setBase(config.url);
				console.log("读取配置文件url:" + config.url)
			}

			$store.commit(
				"setDeviceType",
				platform == "darwin" ? "mac" : platform == "linux" ? "linux" : "pc"
			);
			$store.commit("setHostname", hostname);
		},
	};
</script>

tool.js

fs

fs 读取 fs需要在vue引入 vue-electron 桌面版才能使用

www.jianshu.com/p/117f12a72…

const fs = require("fs");
console.log(fs,"fds");
export function readTxt(url, fn) {
    fs.readFile(url, 'utf-8', (err, data) => {
        if (!err) fn(data)

    })
}

export function readJson(url) {
    try {
        fs.accessSync(url)
        try {
            let data = fs.readFileSync(url)
            if (data[0] === 0xef && data[1] === 0xbb && data[2] === 0xbf) {
                data = data.slice(3);
            }
            data = data.toString("utf-8")
            data = JSON.parse(data)
            return data
        } catch (err) {
            return false
        }
    } catch (err) {
        return false
    }
}

export function writeJson(url, content) {
    try {
        content = JSON.stringify(content)
        fs.writeFileSync(url, content, 'utf-8')
        return true
    } catch (err) {
        return false
    }
}

使用

状态管理器

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
     device: null,
     hostname: null,
  },
    setDeviceType(state, device){
      state.device = device
    },
    setHostname(state, hostname){
      state.hostname = hostname
    },

})

request

import axios from "axios";
import Vue from "vue";
import $store from "../store";
import $router from "../router";

// 判断当前的运行环境 process.env.NODE_ENV
// isDev 为真 开发环境 --- npm run serve
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build
// const isDev = process.env.NODE_ENV === 'development'

let errorCount = 0;
let errorTimer = null;
const request = axios.create({
	baseURL: process.env.VUE_APP_BASE_URL,
});

// 请求拦截器 - 所有的请求开始之前先到此处
request.interceptors.request.use(
	(config) => {
		return config;
	},
	(error) => {
		return Promise.reject(error);
	}
);

// 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use(
	(response) => {
		// console.log(response.data.data)
		// 可以设置 加载的动画效果 的隐藏
		if (response.data.code == "10001" && $store.state.token) {
			Vue.prototype.ajax.logout();
			localStorage.removeItem("login");
			$store.commit("logout");

			Vue.prototype.$message({ message: "登陆失效，请重新登陆" });
			setTimeout(() => {
				$router.replace({ path: "/" });
			}, 1000);
		}
		return response.data;
	},
	(error) => {
		if (!errorTimer) {
			Vue.prototype.$message("链接服务器失败，请查看网络环境或配置文件");
      errorTimer = setTimeout(()=>{
        clearTimeout(errorTimer)
        errorTimer = null;
        errorCount = 0;
      },15000)
		}
		errorCount++;
		if (errorCount > 3 || $store.state.token) {
			Vue.prototype.ajax.logout();
			localStorage.removeItem("login");
			$store.commit("logout");
			setTimeout(() => {
				$router.replace({ path: "/" });
				errorCount = 0;
			}, 1000);
		}
		return Promise.reject(error);
	}
);
export default request;

ajax.js

import request from "./request";
import $store from "@/store/index";
import qs from "qs";

const ajax = {
  setBase: (url) => {
    request.defaults.baseURL = url
  },
  getBase: () => {
    return request.defaults.baseURL
  },
  get: (url, params) => {
    return request({
      url,
      method: "get",
      headers: {
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": $store.state.token || ""
      },
      params
    })
  },
  post: (url, params,isQs) => {
    return request({
      url,
      method: "post",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": $store.state.token || ""
      },
      data:isQs ? params : qs.stringify(params)
    })
  },
  login: (params) => {
    return request({
      url: "/login",
      method: "post",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": ""
      },
      data: qs.stringify(params)
    })
  },
  logout: () => {
    return request({
      url: "/logout",
      method: "get",
      headers: {
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": $store.state.token || ""
      }
    })
  },
  other: (url) => {
    return request({
      baseURL: url,
      method: "get",
      headers: {
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": $store.state.token || ""
      }
    })
  },
  // 上传
  uploadList:(params) =>{
    return request({
      url:'/upload',
      method:"post",
      headers:{
        "XX-Api-Version": "1.0",
        "XX-Device-Type": $store.state.device,
        "XX-Token": $store.state.token || ""
      },
      data: params
    })
  },
  // 分类管理 - 列表
  category:() =>{
    return request({
      url:"/admin/question/category",
      method:"get",
      headers:{
        "XX-Api-Version":"1.0",
        "XX-Device-Type":$store.state.device,
        "XX-Token":$store.state.token
      }
    })
  },
  
}


export default ajax;

hostname

某些条件需要获取不同的主机返回不同的数据就可以已参数形式传递给后台

this.ajax.get("/activation", { name: $store.state.hostname || "主机" })

方法二

根目录 config.json

{ "BASE_URL": " http://192.168.1.231:61000" }

main

main.js是项目的入口文件，项目中所有的页面都会加载main.js。主要有三个作用：

1.实例化Vue。

2.放置项目中经常会用到的插件和CSS样式。

3.存储全局变量。

Vue.prototype.BASE_URL ="http://emulation.cdheshiyu.com"
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
var fs = require('fs')
router.beforeEach((to, from, next) => {
  fs.readFile('config.json', 'utf-8', function (err, data) {
      if (err) {
          process.env.VUE_APP_URL ="http://emulation.cdheshiyu.com"
      }
      else {
          let temp = {}
          temp = JSON.parse(data)
          process.env.VUE_APP_URL= temp.BASE_URL
      }
   
      if(to.meta.title){
        document.title = to.meta.title
      }
      if (!sessionStorage.getItem('token') && to.path != '/login') {
        next({path: '/login'});
      } else {
        next();
      }
    });
  });

方法三

创建全局变量直接window[''] = config

前端 可配置文件 ip 接口 根据不同区域显示不同ip

方法一

App

OS