Gitcx框架文档

常见问题

# vendor 过大问题

建议使用 gzip，使用之后体积会只有原先 1/3 左右，pro 默认已开启

# url 去掉#

• 第 1 步：设置src/config/cli.config.js下的配置publicPath不能为空

• 第 2 步：修改src/config/cli.config.js下的配置routerMode为history

• 第 3 步：需要后端配合

切换为 history 模式 (opens new window)

# Access-Control-Allow-Origin 或者 login 接口不跨域但是 userInfo 接口跨域问题（十分重要）

控制台报错：Request header field accessToken is not allowed by Access-Control-Allow-Headers关于此错误，后端需要对应在 Access-Control-Allow-Headers 添加 accessToken 放行，遇到这类问题说明后端设置了非常规字段不允许自定义，需要联系后端在 Access-Control-Allow-Headers 中配置不被允许的字段，后端解决是最便捷的方案

// 最简单的处理方式
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type,accessToken,Authorization"); // 问题一般都出在这

// 最简单的处理方式
header('Access-Control-Allow-Origin: *')
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS')
header('Access-Control-Allow-Headers: Content-Type,accessToken,Authorization') // 问题一般都出在这

# can't not find 'XXXX'问题

这种情况一般报错信息可以看到是哪个包抛出的信息. 一般卸载这个模块,安装重新安装下即可.

# 路径的写法

项目中推荐使用绝对路径

在 js 中路径一般从 src 那一级开始，一定要注意 @和./的妙用

//示例：调用components中的A组件的a方法
import { a } from "@/components/A";

//示例：调用同级目录下components中的B组件的b方法，可参考src/view/table的目录结构
import { b } from "./components/B";

//示例：引用某个npm包中的css
@import "~element-ui/packages/theme-chalk/src/index";

//示例：引用stylea中的css
@import "~@/style/a.scss";

<!--示例：图片src的用法，约定所有图片都放到assets下参与打包 -->
<el-image :src="require('@/assets/a.jpg')"></el-image>

# 非开发环境去除控制台 console.log()打印

• 第 1 步：安装babel-plugin-transform-remove-console插件

cnpm i babel-plugin-transform-remove-console -D

• 第 2 步：拷贝以下代码到babel.config.js

let plugins = [];
if (process.env.NODE_ENV !== "development") {
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins,
};

# 覆盖全局 axios 默认配置

• 以/login为修改 heades中的Content-Type为例

import request from "@/utils/request";
import { encryptedData } from "@/utils/encrypt";
import { loginRSA } from "@/config/settings";

export async function login(data) {
  if (loginRSA) {
    data = await encryptedData(data);
  }
  return request({
    url: "/login",
    method: "post",
    data,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
    },
  });
}

# 开启路由缓存的注意事项（十分重要）

• 一定要保证 router 与 view 的 name 相同，区分大小写切记写重或者写错。默认如果不写 name 就不会被缓存，详情见 issue (opens new window)

{
  path: 'demo',
  component: ()=>import('@/views/demo/index'),
  name: 'Demo',
  meta: { title: 'demo' }
}

//路由对应的view
export default {
  name: "Demo",
};

• 使用 svg 作为 logo（推荐）： 将你喜欢的 svg 图标放到src/remixIcon/svg下，src/config/settings.js中的 logo 配置为你 svg 的名字即可

• 使用 img 图片作为 logo（不推荐）： 自行修改 src/vab/components/logo.vue源码即可

# • 所有小清新图标的 svg 文件 下载地址 (opens new window)

# 生产环境 element-ui 偶尔图标乱码

element-ui 对最新版 sass 兼容不够友好导致的，在我看来这都不算问题，刷新一下就好了，以下是解决方案：

• 方案 1：sass 换成 node-sass（node-sass 弊端很明显，你要忍受 node_modules 经常无法删除的问题）参考地址 (opens new window)

• 方案 2：element-ui 的图标换成项目自带的小清新图标或 svg

• 方案 3：刷新一下浏览器不就好了，不用太追求完美

# 树形表格报 TypeError: Cannot read property 'slice' of null

注意数据初始值不要设置 null，设置为[]

# 表格在菜单直接切换的时候，为什么会多一条线

element-ui bug，解决方法：不要对表格列进行fixed="top||right||bottom||left"等操作

# 打包后报错Uncaught SyntaxError: Unexpected token in JSON at position 0

由于 pro 演示环境使用的是 mock.js，而非真实的后端，在你打包时需要注意注释掉`src/main.js'下相关的 mock 代码

/**
 * @author chuzhixin 1204505056@qq.com
 * @description 正式环境默认使用mock，正式项目记得注释后再打包
 */
/* if (process.env.NODE_ENV === "production") {
  const { mockXHR } = require("@/utils/static");
  mockXHR();
} */

# 后端收不到数据及参数

• 第 1 步：首先检查你的接口是 get 还是 post，get 时需要传递params，post 时需要传递data

• 第 2 步：查看全局配置中的contentType字段，与后端对应，接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8

# 如何移除雪花屏或修改雪花屏样式

• 移除雪花屏，位置public/index.html，删除以下代码重启即可

<!-- <div class="first-loading-wrp">
  <div class="loading-wrp">
    <span class="dot dot-spin">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </span>
  </div>
  <h1><%= VUE_APP_TITLE %></h1>
</div> -->

• 修改雪花屏样式，位置public/static/css/loading.css，修改完毕重启即可

# 项目运行报 echarts_lib_echarts_WEBPACK_MODUDLE_6_.default.registerThemne is not a function

• 由于 echarts 更新，语法变动较大，导致 vue-echarts 无法使用，解决方案

• 方案 1. 项目升级至 master 分支，使用最新版，新版已移除 vue-echarts，重新封装

• 方案 2. 继续使用 vue-echarts，将 package.json 的 echarts 版本改为 5.0.0 去掉前缀^，重新安装依赖

# 项目运行报export 'JSEncryppt' was not found in 'jsencrypt'

• 由于 国外 jsencrypt 作者更新导致出现 bug，解决方案

• 方案 1. 坐等他修复，开源项目没有收入，看国外作者心情，可能会等很久

• 方案 2. 锁包"jsencrypt": "3.0.0-rc.1"，去掉前缀^，重新安装依赖

• 方案 3.使用最新版本 3.0.0，修改导入正确的 js 在 src/utils/encrypt.js 中，替换第 1 行代码为 import JSEncrypt from 'jsencrypt/bin/jsencrypt.min.js'

# #详情页、query 传参等页面需要缓存，不走 created、mounted 的解决方案（旧版本， 新版本忽略）

• 方案 1：为了解决热更新，src/vab/components/VabKeepAlive组件已经把相关代码注释掉了，缺点，放开后不再支持开发代码热更新

• 方案 2： 既然不走那就不走呗，详情页以及 query 传参的页面，可以通过 watch 监听路由变化，实现数据更新

# 多级路由下如何写中间层（旧版本，新版本忽略）

• 1.不需要缓存的组件直接在父级导入 EmptyLayout 即可，以表格组件为例

import VabEmptyLayout from "@/vab/layouts/VabEmptyLayout";

{
        component: () => VabEmptyLayout,//父级容器
        children: [
          {
            component: () =>  import('@/views/vab/table/comprehensiveTable'),//子级业务路由
          },
        ],
      },

• 2.需要缓存的组件，需要自行编写一个容器用来承载子级路由，以表格组件为例

{
        component: () => import('@/views/vab/table'),//父级容器
        children: [
          {
            component: () => import('@/views/vab/table/comprehensiveTable'),//子级业务路由
          },
        ],
      },

<template>
  <vab-router-view />
</template>

<script>
  export default {
    name: "Table",
  };
</script>

# #如何修改标题栏的小图标

• 找到 public 文件夹，把后缀名为.ico 图标换成自己要的即可，如果有 pwa 应用，需要把 public 图标相关的文件（包括 svg，ico，png）全换掉

# #vab admin plus 第 n 次点击菜单后 appMain 主框架部分不显示

• 原因 1：路由 name 与 path 不能重复（name 首字母必须大写、path 必须全部小写，一级路由的 path 需要带斜线、多级后请勿带斜线）

• 原因 2：vue 页面 export 导出的 name 或 name 重复，需要配置 name 首字母必须大写

• 原因 3：路由 name 未与 vue 页面 export 导出的 name 对应，须完全进行对应，首字母必须大写

• 原因 4：由于 keepALive + transition 特点 vue 页面中最外层 template 下必须且只能包含一个 div，注意 template 下的下一行不能加注释，否则会被识别成多个子级导致报错

<template>
  <div class="test-container"></div>
</template>
<script>
  import { defineComponent } from "vue";

  export default defineComponent({
    name: "Test", // 特别留意
    setup() {
      return {};
    },
  });
</script>

# •element-plus 运行报错的问题 async-validator/dist-web/index.js

cnpm i async-validator@4.0.3

# 如何移除 PWA 桌面端功能及标题图标注入

• 第 1 步：删除package.json中的@vue/cli-plugin-pwa，并重装依赖

• 第 2 步：删除public/img文件夹

• 第 3 步：配置config/cli.config.js中的pwa为 false

• 第 4 步：删除vue.config.js中的如下代码：

// pwa: {
//     workboxOptions: {
//       skipWaiting: true,
//       clientsClaim: true,
//     },
//     themeColor: '#ffffff',
//     msTileColor: '#ffffff',
//     appleMobileWebAppCapable: 'yes',
//     appleMobileWebAppStatusBarStyle: 'black',
//     manifestOptions: {
//       name: 'Vue Admin Beautiful - Admin Plus',
//       short_name: 'Admin Plus',
//       background_color: '#ffffff',
//     },
//   },

# #为什么接口总是请求两次

当项目采用前后端分离模式时，在 CORS-跨域资源共享中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。览器先询问服务器，当前网页的域名是否在服务器的许可名单之中，及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复时，浏览器才会发出正式的 XMLHttpRequest 请求。

开发工具配置