更新1

Question

加载Vue.js 2项目时，我在控制台中收到此错误消息

./src/components/UserSettings.vue
18:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./UserSettings.vue'

UserSettings.vue是一个页面，不需要export default =。这是./src/components/UserSettings.vue

的内容

<template>
  <page-content page-title="My Settings">
    <div class="main-content">
        <md-headline>Notification Position</md-headline>
        <div class="row">
                        <div class="box">
                            <label :class="{'active' : position == 'top-left' }" for="position-top-left" class="tile"> <input v-model="position" id="position-top-left" value="top-left" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'top-center' }" for="position-top-center" class="tile"> <input v-model="position" id="position-top-center" value="top-center" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'top-right' }" for="position-top-right" class="tile"> <input v-model="position" id="position-top-right"  value="top-right" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-left' }" for="position-bottom-left" class="tile"> <input v-model="position" id="position-bottom-left"  value="bottom-left" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-center' }" for="position-bottom-center" class="tile"> <input v-model="position" id="position-bottom-center"  value="bottom-center" name="position" type="radio"/> </label>
                            <label :class="{'active' : position == 'bottom-right' }" for="position-bottom-right" class="tile"> <input v-model="position" id="position-bottom-right" value="bottom-right" name="position" type="radio"/> </label>
                        </div>
                    </div>
    </div>
  </page-content>
</template>

<script>
import 'materialize-css/dist/css/materialize.min.css'
</script>
<style>
.box {
            width: 120px;
            margin-left: 20px;
        }

.tile {
    width: 31.5%;
    background: #9aeae3;
    height: 40px;
    border: 1px solid #26a69a;
    float: left;
    margin: 1px;
    cursor: pointer;
    border-radius: 1px;
}

.tile.active {
    background: #26a69a;
    border-color: #0d6f66;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
    padding: 1px 2em;
    border-radius: 6px;
    background: white;
}
</style>

这是我的相关webpack.config.js内容

var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')

const common = {
    entry: './src/app.js',
    devServer: {
      hot: true,
      historyApiFallback: true,
      noInfo: true
    },
    performance: {
        hints: false
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /(\.css$)/,
        loaders: ['css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
    resolve : {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    }
}
if(TARGET === "dev-server") {
    module.exports = merge(common, {
        devtool: 'cheap-module-eval-source-map',
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            stats: true,
            noInfo: true,
            quiet: true,

            stats: 'errors-only',
            host: process.env.HOST,
            disableHostCheck: true,
            port: 3000
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new NpmInstallPlugin({
                save: true // --save
            }),
        ]
    });
}

更新1

该错误似乎与less-loader部分有关。当我评论这些行时，我再也看不到错误。但是，包含.less文件的项目的某些部分将无法编译。

 {
    test: /\.less$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "less-loader" // compiles Less to CSS
    }]
  },

Answer 1

更改模块导出

if(TARGET === "dev-server") {
    module.exports = merge(common, {

收件人

if(TARGET === "dev-server") {
    export default { merge(common, {

Answer 2

您需要在vue文件中添加'export default {}'代码，因为这是vue require;

＆＃34;导出＆＃39;默认＆＃39; （导入为＆＃39; __ vue_script __＆＃39;）未在＆＃39; !! babel-loader

更新1

2 个答案: