vue-cli报错You may need an additional loader to handle
Author：zhoulujun Date：
vue-cli 报错：Error: "You may need an additional loader to handle the result of these loaders." 报错内容如下：
Module parse failed: Unexpected token (110:47) File was processed with these loaders: * ./node_modules/cache-loader/dist/cjs.js * ./node_modules/thread-loader/dist/cjs.js * ./node_modules/babel-loader/lib/index.js * ./node_modules/cache-loader/dist/cjs.js * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | this.data = _.cloneDeep(this.dataOptions || data.form); | const hexagonRadiusInGeo = 30; > const series = this.optionData.series[0]?.data; | const hexBinResult = this.hexBinStatistics(series.map(item => [item.x * 30 + 100, item.y * 30 + 150, item.value, item.name]), // series, clean-webpack-plugin: pausing due to webpack errors | hexagonRadiusInGeo); @ ./gemchart/src/packages/tilemap/src/tilemap.vue?vue&type=script&lang=js& 1:0-366 1:382-385 1:387-750 1:387-750 @ ./gemchart/src/packages/tilemap/src/tilemap.vue @ ./gemchart/src/packages/tilemap/index.js @ ./gemchart/src/index.ts @ ./src/common/element.js @ ./src/single.ts @ multi ./src/single.ts ERROR Build failed with errors. error in ./src/views/Statement/Panel/Index.vue?vue&type=script&lang=js& Module parse failed: Unexpected token (133:15) File was processed with these loaders: * ./node_modules/cache-loader/dist/cjs.js * ./node_modules/thread-loader/dist/cjs.js * ./node_modules/babel-loader/lib/index.js * ./node_modules/cache-loader/dist/cjs.js * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | const temp = this.colorSchemeList.find(item => item.id === this.statement.color_scheme_id);
vue-loader@15.*之后除了必须带有VueLoaderPlugin
需要使用插件VueLoaderPlugin
在webpack.config.js里用
const VueLoaderPlugin = require('vue-loader/lib/plugin')引入，
然后在module.exports对象里添加plugins:[new VueLoaderPlugin()]
webpack的配置如下：
const path = require('path');
const htmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new htmlWebpackplugin({ //创建一个在内存中生成的html页面的插件
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
}),
new VueLoaderPlugin()
], module: { //这个节点用于配置所有的第三方模块加载器
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置处理.css文件的第三方处理规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=8000' },
{ test: /\.(tff|eot|svg|woff|woff2)$/, use: 'url-loader' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
};如果是vue-cli，就在 vue.config.js 配置：
configureWebpack: (config) => {
config.plugins.push(new VueLoaderPlugin())
}其它的按照此篇文章：vue-loader加载不上报错* ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle https://www.cnblogs.com/vickylinj/p/12787402.html 都做了。
但还是会报这个： “Cannot read property ‘findIndex’ of undefined” 。这个报错在VueLoaderPlugin 里面。
又看了其它 资料，比如：《vue-cli报错You may need an additional loader to handle the result of these loaders. https://blog.csdn.net/Vevean2545116309/article/details/119386491》
原因是因为style标签写成了如下（每次默认敲回车）：
修改为scoped属性之后就好了：
完全不是这样子的，有比如：
vue-loader默认是不支持jsx语法的，需要配置babel-loader进行转化，可参考这个
webpack vue使用jsx
google 搜了都看了，都是不行了的
于是干脆做vue-cli升级。 具体参看 ：https://juejin.cn/post/7038475908339990542
然后vue create yourProject ，合并操作
项目又起来了
参考文章：
webpack命令对项目打包报You may need an additional loader to handle the result of these loaders.错误的解决办法 https://www.jianshu.com/p/c7597344fec6
vue-loader加载不上怎么解决 https://www.yisu.com/zixun/316795.html
转载本站文章《vue-cli报错You may need an additional loader to handle》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/nodejs/8854.html