目录
vue-element-admin点击路由报错Error in render: "RangeError: Maximum call stack size exceeded"
docs:介绍 | vue-element-admin (panjiachen.github.io)
git地址
git clone https://github.com/PanJiaChen/vue-element-admin.git
目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
增加新页面
router.js里面
{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
meta: {
title: 'excel',
icon: 'excel'
},
children: [
{
path: 'export-excel',
component: ()=>import('excel/exportExcel'),
name: 'exportExcel',
meta: { title: 'exportExcel' }
}
]
}
mock与真实接口同时使用
vue.config.js:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// after: require('./mock/mock-server.js'), // 此处有before和after两种方式,看了别人的文章刚开始发现before不生效,after生效,但改到最后发现这一句好像不需要,所以注掉了
proxy: {
// 更新-貌似这个也不需要,所以全部注释掉了,只留下一个真实接口的代理和main.js中引入的mock就好了
// [process.env.VUE_APP_BASE_API + 'vue-admin-template']: { // 'vue-admin-template'为vue-element-admin项目mock接口的公共前缀,如果这个公共前缀做了修改,此处也需要做相应修改
// target: `http://localhost:{port}`,
// changeOrigin: true,
// // pathRewrite: {
// // ['^' + process.env.VUE_APP_BASE_API]: '' // 只用mock时,使用url'/vue-admin-template/table/list'发送请求时,真实的url是'http://localhost:9528/dev-api/vue-admin-template/table/list',所以我认为此处不需要做url替换
// // }
// },
[process.env.VUE_APP_BASE_API]: {
target: 'http://10.130.224.171:80', // 测试
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
然后发现main.js
中mock相关的部分添加了条件判断
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
然后发现main.js
中mock相关的部分添加了条件判断
if (process.env.NODE_ENV === 'development') {
const { mockXHR } = require('../mock')
mockXHR()
}
图片二进制转base64
async getAll({ commit }) {
const result = await getAllPicture()
if (result.code === 0) {
result.data.forEach(element => {
var binary = '';
var bytes = new Uint8Array(element.file.data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
element.file.data = 'data:undefined;base64,' + window.btoa(binary);
});
commit('getall', result.data)
}
}
formData形式上传图片
var formData = new FormData();
formData.append("file", file.raw);
formData.append("adCompany", "长城");
formData.append("adName", "干红葡萄酒");
formData.append("adCategory", "酒");
await addAds(formData);
在table里面展示图片
<el-table-column label="图片" width="180">
<template slot-scope="{ row }">
<img :src="row.file.data" min-width="70" height="70" />
</template>
</el-table-column>
vue-element-admin点击路由报错Error in render: "RangeError: Maximum call stack size exceeded"
把router里的
{ path: '*', redirect: '/404', hidden: true }
改成
{ path: '/404', component: () => import('@/views/error-page/404'), hidden: true }
vue this.$router.push 页面不刷新总结
this.$router.push({
path: "/homePage/searchResult",
query: {
keywords: this.input,
type: this.type,
date:new Date().getTime()
}
})