vuejs使用vux出错Module build failed: Error: Cannot find module 'less'

首先来说明使用场景和错误重现，因为vue使用中出错后对于新手来说定位错误是非常困难的一件事。
本次出错的使用场景是这样的：
使用vux来构建一个移动端的应用，在使用vux的loading来做页面切换中的loading时出现了如题所说的错误。

错误提示

错误解释

Module build failed: Error: Cannot find module ‘less’
这句话不难理解，构建模块时出错，具体的错误是less模块找不到。

错误分析

那么什么是less模块呢？
我们同时再来看同时报出的错误

从该图可以看出button-tab组件也报出了这样的错误，而事实上我们并没有改动button-tab组件
那我们看详细的错误信息。

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-d2b7f8b6","scoped":false,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":false}!.

问题解决

其实导致这个问题的主要原因是因为我们的vux项目中没有配置vux-loader这个在vux2.x中必须要配置使用的。在手册中有说明：

如何来配置

先来看看build/webpack.bask.conf.js文件本来的样子

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')function resolve (dir) {return path.join(__dirname, '..', dir)
}module.exports = {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')]},{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赋值给任何一个变量。改变后的配置

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')function resolve (dir) {return path.join(__dirname, '..', dir)
}const vuxLoader = require('vux-loader')
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')]},{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']
})

vuejs使用vux出错Module build failed: Error: Cannot find module 'less'相关推荐

Module build failed: Error: Cannot find module ‘node-sass‘ Require stack报错解决
Module build failed: Error: Cannot find module 'node-sass' Require stack报错解决异常信息解决方法设置用淘宝镜像下载 npm ...
VUE报错：Module build failed: Error: Cannot find module ‘node-sass‘
报错代码: Module build failed: Error: Cannot find module 'node-sass'at Function.Module._resolveFilename ...
vue项目报错，解决Module build failed: Error: Cannot find module ‘node-sass‘ 问题
vue项目报错,解决Module build failed: Error: Cannot find module 'node-sass' 问题参考文章: (1)vue项目报错,解决Module bu ...
解决Module build failed: Error: Cannot find module ‘node-sass‘Require stack
in ./src/components/main/mainFirm.vueModule build failed: Error: Cannot find module 'node-sass' Requ ...
Module build failed: Error: Cannot find module 'XXX'
解决: 在项目目录下打开命令窗口,安装确实的文件(其他缺少的文件安装方法也类似如此) npm install node-sass
vue启动报错Module build failed: Error: ENOENT: no such file or directory
vue启动项目报错,一大坨如下 Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/son ...
vue报错：Module build failed: Error: Node Sass does not yet support your current environment: Windows
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit ...
Vue项目启动webpack报错Module build failed: Error: No PostCSS Config found in......
自己写的公司项目,今天需要提交到公司版本库,可是在本地启动正常的项目,拷贝到git文件目录下突然报错Module build failed: Error: No PostCSS Config foun ...
Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. node-sass版本过高导致的,卸载 ...