vue-element-admin后台管理

Frankabcdefgh

已于 2023-12-15 15:30:07 修改

阅读量223

点赞数

文章标签： vue.js javascript 前端

于 2023-04-22 22:35:37 首次发布

本文链接：https://blog.csdn.net/Frankabcdefgh/article/details/130311668

版权

vue-element-admin点击路由报错Error in render: "RangeError: Maximum call stack size exceeded"

vue this.$router.push 页面不刷新总结

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()
        }
      })