“ export'default'”” 在'!! babel-loader中找不到

Question

Warning in ./src/Footer.vue
17:2-16 "export 'default' " <imported as '__vue_script__'> was not found in '!!babel-loader!../node_modules/vue-loader/lib/selector?type=script@index=0!./Footer.vue'
@ ./src/Footer.vue
@ ./src/main.js

加载vuejs Webpack项目后，我在控制台中得到空白页和警告：npm run dev。

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {

          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        //exclude: ["/node_modules/","/src/assets/js/core.min.js"]
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },

      {
        test: /\.(woff|woff2|ttf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 10000/*,
              mimetype: 'application/octet-stream'*/
            }
          }
        ]
      }

    ],

  },
  resolve: {

    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']

  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },

  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })


  ])
}

我在Footer.vue中导入了“ core.min.js” js文件之外。

Footer.vue

<template>

  <div>    
      <section class="section section-md bg-gray-31 context-dark">
        <div class="container">
          <div class="row row-40 justify-content-lg-between">
            <div class="col-md-6 col-lg-4 col-xl-3">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Latest Properties</h3><a class="post-minimal" href="single-property.html">
                <div class="post-minimal-image"><img src="./assets/images/post-minimal-01-161x136.jpg" alt="" width="161" height="136"/>
                </div>
                <div class="post-minimal-body">
                  <div class="post-minimal-title"><span> Retail Store Southwest 186th Street</span></div>
                  <div class="post-minimal-text"><span>From $120/month</span></div>
                </div></a><a class="post-minimal" href="single-property.html">
                <div class="post-minimal-image"><img src="./assets/images/post-minimal-02-161x136.jpg" alt="" width="161" height="136"/>
                </div>
                <div class="post-minimal-body">
                  <div class="post-minimal-title"><span> Apartment Building with Subunits</span></div>
                  <div class="post-minimal-text"><span>From $120/month</span></div>
                </div></a>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3 col-bordered">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Contact    Us</h3>
              <div class="link-with-icon heading-4 text-spacing-150 font-sec" data-item=".icon"><span class="icon icon-1 mdi mdi-phone"></span><a href="tel:#">1-800-700-6200</a></div>
              <div class="link-with-icon text-spacing-100" data-item=".icon"><span class="icon icon-2 mdi mdi-email-outline"></span><a href="mailto:#">[email protected]</a></div>
              <div class="link-with-icon text-spacing-100" data-item=".icon"><span class="icon icon-3 mdi mdi-map-marker"></span><a href="#">3015 Grand Ave, Coconut<br style="line-height: 0"> Grove,Merrick Way, FL 12345</a></div>
            </div>
            <div class="col-lg-4">
              <h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"><span class="heading-square-item"></span>Newsletter Signup</h3>
              <p class="rd-mailform-label">Enter your e-mail to get the latest news of Real Estate</p>
              <form class="rd-form rd-mailform rd-form-inline-1" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php">
                <div class="form-wrap">
                  <input class="form-input" id="subscribe-form--email" type="email" name="email" data-constraints="@Email @Required">
                  <label class="form-label" for="subscribe-form--email">Your e-mail</label>
                </div>
                <div class="form-button">
                  <button class="button button-primary button-square" type="submit">Subscribe</button>
                </div>
              </form>
              <ul class="list-inline-1">
                <li><a class="icon fa-facebook" href="#"></a></li>
                <li><a class="icon fa-twitter" href="#"></a></li>
                <li><a class="icon fa-google-plus" href="#"></a></li>
                <li><a class="icon fa-pinterest-p" href="#"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- Page footer-->
      <footer class="section footer-classic context-dark bg-gray-21">
        <div class="container">
          <div class="row row-10 justify-content-sm-between">
            <div class="col-sm-6">
              <!-- Rights-->
              <p class="rights"><span>Real Estate</span> <span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><a href="privacy-policy.html">Privacy Policy</a>
              </p>
            </div>
            <div class="col-sm-6 text-sm-right">
              <div class="right-1"><a href="submit-property.html"><span class="icon mdi mdi-plus"></span>Submit Property</a></div>
            </div>
          </div>
        </div>
      </footer>

    <!-- Global Mailform Output -->
    <div class="snackbars" id="form-output-global"></div>
  </div>  

</template>

<script >
  import "./assets/js/core.min.js";
</script>

查看在Footer.vue中导入的core.min.js的完整代码，请检查：https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view

项目目录的图像

Answer 1

尝试像Footer.vue中那样导出组件：

<script>
  import "./assets/js/core.min.js";

  export default {
    name: 'Footer'
  }
</script>

如果您有几分钟的时间，可能需要阅读https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e。