Vue-element-admin: 有升级到vue-cli3计划么

Created on 4 Aug 2018 · 13Comments · Source: PanJiaChen/vue-element-admin

现在vue-cli3 到rc10咯，看样子要快稳定版了。

4.0 in plan

Source

luwzchn

👍3

Most helpful comment

下个大版本升级吧，目前会先修复和完善一些issue中的问题。

PanJiaChen on 22 Aug 2018

👍12

All 13 comments

并不算很稳定吧，最近刚给vue-cli3提了两个bug。。。。其实迁移到vue-cli3的成本不是很高。本项目会等它正式 release 了，再考虑。

PanJiaChen on 5 Aug 2018

👍8

vue-cli 3 已经正式发布了，请问作者打算什么时候开始？

TothingWay on 22 Aug 2018

下个大版本升级吧，目前会先修复和完善一些issue中的问题。

PanJiaChen on 22 Aug 2018

👍12

期待下个大版本

XinJiangQingMang on 28 Aug 2018

最近在给vue-cli3写插件, 项目上用的也是基于element-admin,期待早日升级到vue-cli3

ChasLui on 29 Aug 2018

把项目代码挪到vue-cli3生成的项目中，运行结果图标显示不出来了，可能vue-cli3的默认loader rule不对，正在磕磕碰碰地尝试把webpack.base.conf中的一些rules配置挪到vue.config.js中，哪位大侠若踩过坑，顺便贴上自己的配置共享一下？

rwsbillyang on 6 Sep 2018

@rwsbillyang https://github.com/PanJiaChen/vue-element-admin/issues/980

PanJiaChen on 6 Sep 2018

依照 #980 ，vue.config.js如下配置：

'use strict'

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('svg')
            .exclude.add('./src/icons')
            .end()

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add('./src/icons')
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })   
    }
  }

然后，查看配置：

$ vue inspect --rules
[
  'vue',
  'images',
  'svg',
  'media',
  'fonts',
  'pug',
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus',
  'js',
  'eslint',
  'icons'
]

$ vue inspect --rule icons
/* config.module.rule('icons') */
{
  test: /\.svg$/,
  include: [
    './src/icons'
  ],
  use: [
    /* config.module.rule('icons').use('svg-sprite-loader') */
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
}


$ vue inspect --rule svg
/* config.module.rule('svg') */
{
  test: /\.(svg)(\?.*)?$/,
  exclude: [
    './src/icons'
  ],
  use: [
    /* config.module.rule('svg').use('file-loader') */
    {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]'
      }
    }
  ]
}

//另：插件情况
$ vue inspect --plugins
[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'hmr',
  'no-emit-on-errors',
  'progress',
  'html',
  'preload',
  'prefetch',
  'copy'
]

但执行后，发现@/views/svg-icons/index.vue

mounted() {
//添加log输出
     console.log("iconsMap:"+icons.state.iconsMap)
    const iconsMap = icons.state.iconsMap.map((i) => {
     //icons.state.iconsMap中的元素似乎只是只是字符串，无default.id属性
      return i.default.id.split('-')[1]
    })
    this.iconsMap = iconsMap
  },

会报错，输出log及报错信息如下：

iconsMap:/img/404.ba00b810.svg,/img/bug.c769d87a.svg,/img/chart.2901a206.svg,/img/clipboard.35dea81d.svg,/img/component.39f9ace6.svg,/img/dashboard.adf027c8.svg,/img/documentation.7d408b8a.svg,/img/drag.f00256e7.svg,/img/edit.417f6590.svg,/img/email.c1d34866.svg,/img/example.68bd9f77.svg,/img/excel.52faddc8.svg,/img/eye.a18f1b79.svg,/img/form.80703570.svg,/img/guide.ac7f9d73.svg,/img/icon.fc12c195.svg,/img/international.7f8bef22.svg,/img/language.7d60bc4e.svg,/img/link.83161b36.svg,/img/list.d49ead55.svg,/img/lock.3720ff25.svg,/img/message.17800c1a.svg,/img/money.41c89f36.svg,/img/nested.952852a4.svg,/img/password.edb96aed.svg,/img/people.83ef79fd.svg,/img/peoples.5268f502.svg,/img/qq.762ef26a.svg,/img/shoppingCard.f191b46b.svg,/img/size.63a372b7.svg,/img/star.19c3d63d.svg,/img/tab.e1e7f1a5.svg,/img/table.2f028f80.svg,/img/theme.d575e933.svg,/img/user.54a04098.svg,/img/wechat.5707e9f0.svg,/img/zip.1a0bd082.svg
vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'id' of undefined"

found in

---> at src/views/svg-icons/index.vue
at src/views/layout/components/AppMain.vue
at src/views/layout/Layout.vue
at src/App.vue

原因是这里（src/icons/index.js）iconMap数组中最后得到的是字符串元素

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

正常情况下，我查看了原工程中执行时其元素输出像这样子：