9. 常见问题

超级管理员 1 614

vue-admin-beautiful 和 vue-admin-beautiful-template 对比

  • 区别： vue-admin-beautiful 是一个后台的集成方案，它囊括了很多的功能和组件，并不适合作为基础模板来进行二次开发。 vue-admin-beautiful-template 则是一个后台的基础模板脚手架，适合在它的基础上进行二次开发。

  • 相同点： vue-admin-beautiful 和 vue-admin-beautiful-template 都是开源免费的，但凡请保留作者的控制台打印的版权信息，如果您一定要去掉并更换成自己的版权 请访问这里查看详情 vue-admin-beautiful-template 基础框架（推荐）

代码下载慢

npm 或者 github 有时候因为中国墙的原因，网速会不稳定，解决方案：

  • 使用码云 自行注册码云账号，新建项目导入 vue-admin-beautiful 的地址即可实现与 github 同步

  • 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • Yarn
yarn install

vendor 过大问题

建议使用 gzip，使用之后体积会只有原先 1/3 左右

# url 去掉#

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

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

  • 第 3 步：需要后端配合

    切换为 history 模式

# 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");

// 最简单的处理方式
header('Access-Control-Allow-Origin: *')
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS')
header('Access-Control-Allow-Headers: Content-Type,accessToken')

can't not find 'xxModule'问题

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

# 路径的写法

项目中推荐使用绝对路径

在 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>

解决 node 内存溢出，满血跑 vue/cli4

cnpm i increase-memory-limit -D
increase-memory-limit

小清新图标用法

第1步：点击你喜欢的小清新图标复制代码，粘贴到你的vue代码中
第2步：找到你喜欢的小清新图标，右键审查元素将图标svg文件下载到本地
第3步：剪切到src/remixIcon/svg文件夹中
第4步：打开网页即可看到效果

所有小清新图标的 svg 文件 下载地址

多彩图标用法

第1步：点击你喜欢的多彩图标复制代码，粘贴到你的vue代码中
第2步：找到你喜欢的多彩图标，右键审查元素将图标svg文件下载到本地
第3步：剪切到src/colorfulIcon/svg文件夹中
第4步：打开网页即可看到效果

关于请求会过滤 key 为空的项

//如果不想过滤，注释掉src/utils/request.js文件下方代码即可
/* if (config.data) {
  config.data = _.pickBy(config.data, _.identity);
} */

非开发环境去除控制台 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 路由声明
{
  path: 'demo',
  component: ()=>import('@/views/demo/index'),
  name: 'Demo',
  meta: { title: 'demo' }
}

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

一定要保证 router 与 view 的 name 相同，区分大小写切记写重或者写错。默认如果不写 name 就不会被缓存，详情见[issue](https://github.com/vuejs/vue/issues/6938#issuecomment-345728620)。

打包图片报错 Cannot find module 'gifsicle'

建议使用 cnpm 安装，当然你一定用 npm 安装的话，在 install 完毕后执行如下操作即可

cnpm i image-webpack-loader -D

 

 

章节目录