vue.js - 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、针对打包后文件较大有什么好的办法？

解决方案

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

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

而应该是

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

这篇关于vue.js - vux 手动引入组件后报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！