全局配置

环境变量配置，用于配置 api 请求地址(新版本已弃用)

.env.development    # 在开发环境中被载入
.env.production     # 在生产环境中被载入
.env.test           # 在测试环境中被载入

api 请求地址（新版本），详见config/settting.config.js中的 baseURL，其中?后面配置开发环境，：后面配置生产环境

setting.js 配置

• 说明：这里有好多你会用到的配置项。
• 位置：src/config/settings.js
• 示例代码：

module.exports = {
  title: "vue-admin-better", //标题
  abbreviation: "vab", //简写
  devPort: "80", //开发环境端口号
  version: "V1.0", //版本号
  copyright: "初志鑫1204505056@qq.com", //烦请保留版权，如需去除请联系群主
  routesWhiteList: ["/login", "/404", "/401"], //不经过token校验的路由
  loadingText: "正在加载中...", //加载时显示文字
  tokenName: "accessToken", //token名称
  tokenTableName: "BYUI-VUE-TABLE", //token表名
  storage: "localStorage", //token存储位置
  logo: true, //是否显示logo
  header: "fixed", //固定fixed 不固定noFixed
  layout: "vertical", //横纵布局 horizontal vertical
  themeBar: true, //是否开启主题配置按钮
  tagsView: true, //是否显示多标签页
  contentType: "application/json;charset=UTF-8", //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
  messageDuration: 3000, //消息框消失时间
  requestTimeout: 5000, //最长请求时间
  successCode: 200, //操作正常code
  invalidCode: 402, //登录失效code
  noPermissionCode: 401, //无权限code
  errorLog: ["development", "test", "production"], //是否显示在页面高亮错误
  shieldF12: false, //设置生产环境是否屏蔽f12等开发组工具快捷键
  loginInterception: true, //是否开启登录拦截
  loginRSA: false, //是否开启登录RSA加密
  httpRequestFile: false, //是否依据mock数据生成webstorm HTTP Request请求文件
  authentication: "intelligence", //intelligence和all两种方式，前者后端权限只控制roles不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载
};

variables.scss 配置

• 说明：这里可以修改你项目的配色方案，简单修改即可实现风格大变。
• 位置：src/styles/variables.scss
• 示例代码：

@charset "utf-8";

$base-color-default: #1890ff;
$base-z-index: 999;

$base-menu-background: #001529;
$base-menu-children-background: #000c17;
$base-menu-background-active: $base-color-default;
$base-menu-text: hsla(0, 0%, 100%, 0.95);
$base-menu-text-active: hsla(0, 0%, 100%, 0.95);
$base-title: #fff;

$base-font-size-small: 12px;
$base-font-size-default: 14px;
$base-font-size-big: 16px;
$base-font-size-bigger: 18px;
$base-font-size-max: 22px;
$base-color-header: $base-menu-background;
$base-color-blue: $base-color-default;
$base-color-green: #13ce66;
$base-color-white: #fff;
$base-color-black: #000;
$base-color-yellow: #ffba00;
$base-color-red: #ff4d4f;
$base-color-gray: rgba(0, 0, 0, 0.65);
$base-main-width: 1279px;
$base-border-radius: 2px;
$base-border-color: #ebeef5;
$base-form-width: 600px;
$base-input-height: 32px;
$base-pagination-height: 28px;
$base-dialog-title-height: 40px;
$base-padding: 15px;
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
$base-font-color: #606266;
$base-left-menu-width: 220px;
$base-right-content-width: calc(100% - 220px);
$base-left-menu-width-min: 65px;
$base-right-content-width-min: calc(100% - 65px);

/* stylelint-disable */
:export {
  menu-text: $base-menu-text;
  menu-text-active: $base-menu-text-active;
  menu-background: $base-menu-background;
  menu-children-background: $base-menu-children-background;
  menu-background-active: $base-menu-background-active;
  tagviews-background-active: $base-color-blue;
  button-background: $base-color-blue;
  pagination-background-active: $base-color-blue;
}

element-ui 组件尺寸配置

• 说明：这里可以修改你 element-ui 组件尺寸，element-ui 组件的尺寸一共分为 large、default、small 、mini，本项目默认使用的是 small。
• 位置：src/plugins/element.js
• 示例代码：

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/display.css";

import "@/styles/element-variables.scss";

Vue.use(ElementUI, {
  size: "small", // element-ui组件的尺寸一共分为large、default、small 、mini
});

如何将公共布局 zx-layouts 本地化（旧版本）

缺点：无法获取更新推送，无法获取最新的外框功能 优点：可以更好的高度自定义核心组件

• 第 1 步：安装依赖后打开选择 node_modules 文件夹，搜索 zx-layouts，搜索完成后将此文件夹拷贝到src/layouts/components文件夹下
• 第 2 步：修改src/layouts/components/index.js中的内容，把每一个zx-layouts前面加上./，示例代码如下：

export { default as Logo } from "./zx-layouts/Logo";
export { default as Avatar } from "./zx-layouts/Avatar";
export { default as Ad } from "./Ad";
export { default as AppMain } from "./zx-layouts/AppMain";
export { default as TagsBar } from "./zx-layouts/TagsBar";
export { default as SideBar } from "./zx-layouts/SideBar";
export { default as Breadcrumb } from "./zx-layouts/Breadcrumb";
export { default as FullScreenBar } from "./zx-layouts/FullScreenBar";
export { default as ErrorLog } from "./zx-layouts/ErrorLog";
export { default as ThemeBar } from "./zx-layouts/ThemeBar";
export { default as TopBar } from "./zx-layouts/TopBar";
export { default as NavBar } from "./zx-layouts/NavBar";

如何将公共布局 zx-layouts 本地化（新版本）

• 第 1 步：直接修改src/layouts/export.js下的代码如下即可，zx-layouts变更为./zx-layouts
• 第 2 步：直接将 node_modules 中的zx-layouts拷贝到与src/layouts/export.js同级目录即可

/**
 * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
 * @description 公共布局自动导出
 */

import Vue from "vue";

const requireComponents = require.context("./components", true, /\.vue$/);
requireComponents.keys().forEach((fileName) => {
  const componentConfig = requireComponents(fileName);
  const componentName = componentConfig.default.name;
  Vue.component(componentName, componentConfig.default || componentConfig);
});

const requireZxLayouts = require.context("./zx-layouts", true, /\.vue$/);
requireZxLayouts.keys().forEach((fileName) => {
  const componentConfig = requireZxLayouts(fileName);
  const componentName = componentConfig.default.name;
  Vue.component(componentName, componentConfig.default || componentConfig);
})``;