vux 手动引入组件后报错

新手上路,请多包涵

一、问题描述:
新上手vux做项目,使用vue-route的按需加载
图片描述
原来的组件引入方式是这样的

import { Flexbox, FlexboxItem, Swiper, SwiperItem, ViewBox, Tabbar, TabbarItem, Tab, TabItem, Sticky } from 'vux'

然后出现如下警告:

VUX: 如果你看到这一行,说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件,会导致打包体积过大。请升级到最新版本 vux-loader,建议开启 eslint(standard)。

同时,在打包成生产环境的中一个js文件就有1M多,页面切换要等待好久,心碎,如下图:
图片描述
网上查阅资料,说是通过vux自动引入组件的方式会打包很多用不上的,建议手动引入需要的组件,于是修改代码如下:

import ViewBox from 'vux/src/components/ViewBox'
import Sticky from 'vux/src/components/sticky'
import XHeader from 'vux/src/components/x-header'
import Flexbox from 'vux/src/components/flexbox'
import FlexboxItem from 'vux/src/components/flexbox/flexbox-item'
import Swiper from 'vux/src/components/swiper'
import SwiperItem from 'vux/src/components/swiper/swiper-item'
import Tab from 'vux/src/components/tab'
import TabItem from 'vux/src/components/tab/tab-item'

然后出现如下警告:
图片描述

二、问题
1、出现上述警告该如何消除?
2、针对打包后文件较大有什么好的办法?

阅读 9.4k
3 个回答
✓ 已被采纳新手上路,请多包涵

我去,找到原因了!手动引用部分方法引用错误
不应该是

import Flexbox from 'vux/src/components/flexbox'

而应该是

import Flexbox from 'vux/src/components/flexbox/flexbox'
//或者
import Flexbox from 'vux/src/components/flexbox/flexbox.vue'

components里注册组件名?

VUX: 如果你看到这一行,说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件,会导致打包体积过大。请升级到最新版本 vux-loader,建议开启 eslint(standard)。

这个问题网上查过是因为vue-loader版本过高导致,可以降低版本至
"vue-loader": "^12.2.2"
原文链接:http://www.voidcn.com/article...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题