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

[linsywu]

按照官网上的命令行：vue init airyland/vux2 projectName初始化了一个项目，npm run dev跑起来后控制台会出现警告：
VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。
并且确实在build代码的时候会比以前慢很多，看日志是把所有的文件都编译打包了一次，比以前慢了很多。
通过一下方法进行过排除：
1、跟以前正常的项目的webpack,base.conf.js文件进行对比，没有具体出入；
2、安装以前版本的vux-loader;
3、安装以前版本的vux；
试过之后都没有解决，请作者帮忙看一下问题所在，代码初始化之后，我本身并没有做任何修改
相关版本：
"dependencies": {
"vux": "^2.2.0",
"fastclick": "^1.0.6",
"vuex-i18n": "^1.3.1",
"vuex": "^2.1.1",
"vue-router": "^3.0.1",
"vue": "^2.5.2"
},
"devDependencies": {
"vux-loader": "^1.0.56",
"vue-loader": "^13.3.0",
}

webpack,base.conf.js文件：
`'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader')

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

let webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint? [{
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})
`

[minhail]

同样有这样的问题，什么都没改就官方的例子直接run build，打包后app.js有1m大小。
然后尝试将HelloFromVux.vue里面的import {Group, Cell} from 'vux';
改成了
import Group from 'vux/src/components/group/index.vue'
import Cell from 'vux/src/components/cell/index.vue'
打包瞬间小了

[linsywu]

如果像你这么改了，是不是vux-loader其实就不起作用了；我们自己手动指定到了相应的模块，并不是vux-loader按需加载的了；所以说是vux-loader的问题？

[minhail]

我感觉是vux-loader的问题。网上看到有说是vux-loader的映射问题~

[Vincentyiu]

npm update一下vux就行了 我2.6.1前也有相关提示，update好就ok了

[linsywu]

"vux": "^2.7.5"更新到这个版本也是一样 @Vincentyiu

[wufan123]

同样的问题

[airyland]

确认下是不是更新到最新的 vue-loader 13.6.0了，如果是，尝试降级。

[airyland]

再次敲黑板，尝试降级 vue-loader(不是 vux-loader) 使用，不要使用 vue 13.6.0。

[yongjun925]

"vue-loader": "^13.3.0" 要降级到哪个版本

[Vincentyiu]

"vue-loader": "^11.1.4"
"vux": "^2.6.1"
可用

[linsywu]

"vue-loader": "^12.2.2",将vue-loader降级到这个版本，问题得到解决，不知道这个问题后期是否能解决？ @airyland 谢谢

[jiuwuxiaohun]

vue-loader版本不兼容导致的，我就是这样处理的，降低vue-loader版本，我也新手，如果说错了，勿怪

[YukiYuko]

按照楼上所述的方法试了都没有用呢，我把另外个项目原封不动的复制一份出来，然后复制的那份重新安装了所有依赖，结果复制出的那份还是出现了这种问题，我另外个项目是好好的

[oldleo]

降级"vue-loader": "^12.2.2"，解决了。
希望早日解决兼容性问题。

[Evansy]

降级到"vue-loader": "^13.2.0" 也是没问题的。

[airyland]

Fixed in [email protected]

[whieet]

`'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const vuxLoader = require('vux-loader')

//手动配置项

//手动配置项

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

const webpackConfig= {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})
`

更新完成后按照官方文档改一下webpack.base.conf.js配置文件即可

[PetersonLian]

我提一个情况，也会报类似这个提示。

我vux，写成了Vux;
如下:

import { AlertPlugin } from 'Vux'

从而出错。

[reuwi]

我也遇到了这个问题，排查了好久发现是有个实习生import组件的时候import和from后面不加空格的，妈的，真的是醉了

[airyland]

@PetersonLian Vux 是拼写错误了，这种无法从工具库解决。

@gaoshijun1993 import 后不加空格是兼容的，如果有问题请检查 vux-loader 版本。而 from 后面不加空格这就是 js 语法错误了。

[yehoan]

我降级了vue-loader 和那个 vux-loader 为什么还是提示我升级到最新的vux-loader

[RicoLiu]

可以异步加载
Vue.component('loading', () => import('vux').then(({ Loading }) => Loading))

[PetersonLian]

@airyland 是的，拼写错误，不是工具库负责解决的。
我提出来是希望有人在遇到相同问题的时候，能多一个排查的思路。

[artoriaforDY]

import { Scroller } from "vux" 用双引号也会有这个问题，单引号就没有

[wangwenjie1314]

import { Scroller } from "vux" 用双引号也会有这个问题，单引号就没有

good job

[qianweijian2017]

2018年了，vue vue-loader vux vux-loader 哪个版本是兼容的

[jinweizhiyuan]

Fixed in [email protected]

@airyland 我最近写的项目中用到了 vue-cli 3.1.3，引用了vux 2.9.2，但打包时提示配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大,项目地址https://github.com/jinweizhiyuan/vue-cli-3.1.3

[jinweizhiyuan]

Fixed in [email protected]

@airyland 我最近写的项目中用到了 vue-cli 3.1.3，引用了vux 2.9.2，但打包时提示配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大,项目地址https://github.com/jinweizhiyuan/vue-cli-3.1.3

已解决，原因是vux-loader检测不到babel-loader就不加载js-loader，因此修改了一下vux-loader/src/index.js，代码在我的项目里的readme里边有说明https://github.com/jinweizhiyuan/vue-cli-3.1.3#%E9%85%8D%E7%BD%AE%E6%B3%A8%E6%84%8F

[gottayan]

"===="
解决了 谢谢。
解决办法：https://juejin.im/post/5e78a4e85188255dd31ebd55
"===="

@airyland 大佬 我也是一直遇到这个问题 vue-cil3 webpack4.x
如果vue-loader使用14版本是可以运行打包 但vux无法按需引入
如果降级 就编译报错了
1、降级情况 "@vux/loader": "^2.0.0-rc4", "vue-loader": "^13.2.0" 报错
Failed to compile with 1 errors
error in ./src/main.js
Module build failed (from ./node_modules/@vux/loader/src/js-loader.js):
Error: Unknown option: .module. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
2、不降级情况"@vux/loader": "^2.0.0-rc4" "vue-loader": "^15.9.1",
或者 使用"vue-loader": "14.2.2", 不使用"@vux/loader": "^2.0.0-rc4"
vux按需加载编译不成功 index.html出现link标签加载js情况
浏览器打印显示：index.js?366f:3 VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。
3、"vue-loader": "^13.3.0", 不使用"@vux/loader": "^2.0.0-rc4"**
报错
Module build failed: Error: ENOENT: no such file or directory, open '/node_modules/vue-
loader/lib/runtime/component-normalizer.js'
@ ./src/App.vue 19:0-93 20:16-34
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://10.102.41.94:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[gottayan]

解决办法：https://juejin.im/post/5e78a4e85188255dd31ebd55