• home > webfront > ECMAS > npm-node >

    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 " 报错内容如下:Modul

    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);


    [email protected]*之后除了必须带有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