引入vue-baidu-map后的编译错误？

Question

在H5项目里引入vue-baidu-map，初步按照官方文档按需引入：

<template>  
  <div>  
    <baidu-map class="bm-view" ak="" :center="center" :zoom="zoom" @ready="handler">  
    </baidu-map>
  </div>  
</template>  

<script>  
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';  

export default {  
  name: 'Map',  
  components: { BaiduMap },  
  data() {  
    return {  
      center: { lng: 0, lat: 0 },  
      zoom: 3,  
    };  
  },  
  methods: {  
    handler({ BMap, map }) {  
      console.log(BMap, map);
    },  
  },  
};  
</script>  

<style lang="scss" scoped\>  
.bm-view {  
  width: 100%;  
  height: 300px;  
}
</style>

然后项目启动的时候就一直编译失败：

ERROR  Failed to compile with 1 errors16:04:38
error  in ./node_modules/vue-baidu-map/components/map/Map.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
|   <div v-if="!hasBmView" ref="view" style="width: 100%; height: 100%">

在此之前引入的其它所有组件都没有问题，webpack就基础配置，如下：

'use strict';  
const webpack \= require('webpack');  
const config \= require('../config');  
const VueLoaderPlugin = require('vue-loader/lib/plugin');  
const depsPlugin = require('extract-dependency-manifest-plugin');  
const path \= require('path');  
const isProduction \= process.env.NODE\_ENV === 'production';  
const isDevelopment \= process.env.NODE\_ENV === 'development';  
const MiniCssExtractPlugin \= require('mini-css-extract-plugin'); // 提取单独打包css文件  

// 接收运行参数  
const argv \= require('yargs')  
  .describe('debug', 'debug 环境') // use 'webpack --debug'  
  .argv;  

const plugins \= \[\];  

console.log('Building on \*---' \+ process.env.NODE\_ENV + '---\* MODE');  

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: isProduction || isDevelopment  
  ? 'js/\[name\].\[contenthash:7\].js'  
  : 'js/\[name\].js',  
    chunkFilename: isProduction || isDevelopment  
  ? 'js/\[name\].\[contenthash:7\].js'  
  : 'js/\[name\].js',  
    publicPath: isProduction  
  ? config.build.assetsPublicPath  
  : (isDevelopment  
  ? config.dev.assetsPublicPath  
  : config.local.assetsPublicPath),  
  },  
  resolve: {  
    extensions: \['.js', '.vue', '.json', '.scss', 'less'\],  
    alias: {  
      vue$: 'vue/dist/vue.esm.js',  
      '@': resolve('src'),  
    },  
  },  
  module: {  
    rules: \[  
      {  
        enforce: 'pre',  
        test: /\\.(vue|js)$/,  
        loader: 'eslint-loader',  
        exclude: /node\_modules/,  
        include: resolve('src'),  
      },  
      {  
        test: /\\.vue$/,  
        loader: 'vue-loader',  
        exclude: /node\_modules/,  
        include: resolve('src'),  
      },  
      {  
        test: /\\.js$/,  
        use: isProduction  
  ? \[  
              {  
                loader: 'cache-loader',  
                options: {  
                  cacheDirectory: resolve('cache-loader'),  
                },  
              },  
              'babel-loader',  
            \]  
          : \['babel-loader'\],  
        exclude: /node\_modules/,  
        include: resolve('src'),  
      },  
      {  
        test: /\\.css$/,  
        use: \[  
          MiniCssExtractPlugin.loader,  
          {  
            loader: "css-loader",  
            options: {  
              importLoaders: 2  
  }  
          },  
          "postcss-loader"  
  \]  
      },  
      {  
        test: /\\.scss$/,  
        use: \[  
          MiniCssExtractPlugin.loader,  
          {  
            loader: "css-loader",  
            options: {  
              importLoaders: 2  
  }  
          },  
          "postcss-loader",  
          "sass-loader"  
  \]  
      },  
      // 它会应用到普通的 \`.css\` 文件  
  // 以及 \`.vue\` 文件中的 \`<style>\` 块  
  {  
        test: /\\.less$/,  
        use: \[  
          MiniCssExtractPlugin.loader,  
          {  
            loader: 'css-loader',  
            options: {  
              importLoaders: 2  
  },  
          },  
          'postcss-loader',  
          'less-loader',  
        \],  
      },  
      {  
        test: /\\.svg$/,  
        loader: 'svg-sprite-loader',  
        include: \[resolve('src/icons')\],  
        options: {  
          symbolId: 'icon-\[name\]',  
        },  
      },  
      {  
        test: /.(png|jpe?g|gif|svg)(\\?.\*)?$/,  
        loader: 'url-loader',  
        exclude: \[resolve('src/icons')\],  
        options: {  
          limit: 10000,  
          name: 'img/\[name\].\[hash:4\].\[ext\]',  
        },  
      },  
      {  
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\\?.\*)?$/,  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: 'media/\[name\].\[hash:4\].\[ext\]',  
        },  
      },  
      {  
        test: /.(woff2?|eot|ttf|otf)(\\?.\*)?$/,  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: 'fonts/\[name\].\[hash:4\].\[ext\]',  
        },  
      },  
    \],  
  },  
  plugins: \[  
    //keep module.id stable when vendor modules does not change  
  new depsPlugin(JSON.stringify(require("../package.json").version)),  
    new webpack.HashedModuleIdsPlugin(),  
    // new vConsolePlugin({enable: !!argv.debug}),  
  new VueLoaderPlugin(), // vue loader 15 必须添加plugin  
  \].concat(plugins),  
};

想请问是什么原因导致的？

Answer 1

根据你的报错，是没有loader来处理vue文件造成的

你试着改下你配置的vue-loader，把后面两个文件包含和排除配置隐藏了

      {  
        test: /\\.vue$/,  
        loader: 'vue-loader',  
       // exclude: /node\_modules/,  
       // include: resolve('src'),  
      }