Question

/src/assets/js/core.min.js

Module not found: Error: 
Can't resolve '../jquery' in 'C:\Users\mohammad\vue-webpack\src\assets\js'
 @ ./src/assets/js/core.min.js 62:67-90
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Footer.vue
 @ ./src/Footer.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我在core.min.js中最小化了js文件。由于字符数限制，我没有显示最小化js文件的代码。注释中提到了导入的所有最小化js文件的网址。

要查看core.min.js的完整代码，请检查 https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view

core.min.js

/**
 * @module       jQuery
 * @author       jQuery Foundation and other contributors
 * @see          https://code.jquery.com/jquery/
 * @license      MIT (jquery.org/license)
 * @version      3.2.1
 */


/**
 * @module       jQuery Migrate
 * @author       jQuery Foundation and other contributors
 * @see          https://code.jquery.com/jquery/
 * @license      MIT
 * @version      3.0.0
 */


/**
 * @module       jQuery Cookie Plugin
 * @see          https://github.com/carhartl/jquery-cookie
 * @license      MIT
 */


/**
 * @module       Device.js
 * @see          https://github.com/matthewhudson/device.js
 * @license      MIT
 */


/**
 * @module       jQuery resize event
 * @see          http://benalman.com/projects/jquery-resize-plugin/
 * @license      MIT
 */


/**
 * @module       jQuery easing
 * @author       George McGinley Smith
 * @see          http://gsgd.co.uk/sandbox/jquery/easing/
 * @license      BSD
 * @version      1.4.0
 */

/**
 * @module       TouchSwipe
 * @see          https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
 * @license      MIT
 * @version      1.6.18
 */


/**
 * @module       Popper.js
 * @author       Federico Zivolo
 * @see          https://github.com/FezVrasta/popper.js
 * @license      MIT
 * @version      1.14.3
 */


/**
 * @module       Bootstrap
 * @author       Twitter, Inc.
 * @see          http://getbootstrap.com
 * @license      MIT
 * @version      4.1.3
 */


/**
 * @module       Regula
 * @description  An annotation-based form-validation framework in Javascript
 * @license      BSD
 * @version      1.3.4
 * @copyright    Robert Nyman, http://www.robertnyman.com
 */


/**
 * @module       Form
 * @version      3.51
 * @author       M. Alsup
 * @see          {@link http://malsup.com/jquery/form}
 * @see          {@link https://github.com/jquery-form/form}
 * @license      MIT and GPL
 * @requires     module:jQuery
 */

/**
 * @module       RDInputLabel
 * @author       Evgeniy Gusarov
 * @license      MIT
 */


/**
 * @module       RD FilePicker
 * @author       Aleksey Patsurkovskiy
 * @version      1.0.2
 * @license      MIT
 * @link         http://cms.devoffice.com/coding-demo/mnemon1k/rd-filepicker/demo/
 */


/**
 * @module       Owl carousel
 * @version      2.2.1
 * @author       Bartosz Wojciechowski
 * @license      MIT
 */


/**
 * @module       Isotope PACKAGED
 * @license      GPLv3
 * @see          http://isotope.metafizzy.co
 * @version      2.2.2
 */


/**
 * @module       RD Navbar
 * @author       Evgeniy Gusarov
 * @see          https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a
 * @version      2.2.5
 */


/**
 * @module       UIToTop
 * @author       Matt Varone
 * @see          http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
 * @license      MIT
 */


/**
 * @module       Materianize Parallax
 * @see          http://materializecss.com/parallax-demo.html
 * @licesne      MIT
 */


/**
 * @module       Swiper
 * @description  Most modern mobile touch slider and framework with hardware accelerated transitions
 * @author       Vladimir Kharlampidi
 * @see          http://www.idangero.us/swiper/
 * @licesne      MIT
 * @version      4.1.0
 */




/**
 * @module       Lightgallery
 * @author       Sachin N
 * @see          http://sachinchoolur.github.io/lightGallery/
 * @license      GPLv3
 * @version      1.6.2 - 2017-10-03
 */


/**
 * @module       WOW
 * @author       Matthieu Aussaguel
 * @license      MIT
 * @version      1.1.3
 */


/**
 * @module       PageTransition
 * @author       Roman Kravchuk (JeremyLuis)
 * @license      MIT
 * @version      1.1.3
 * @description  Smooth transition between pages
 * @requires     module:jQuery
 */


/**
 * @module       Select2
 * @see          https://github.com/select2/select2/blob/master/
 * @license      MIT
 * @version      3.5.4
 */


/**
 * @module       Slick
 * @author       Ken Wheeler
 * @see          http://kenwheeler.github.io/slick
 * @version      1.6.0
 */


/**
 * @module       Stepper
 * @version      3.0.8
 * @license      MIT
 * @link         http://classic.formstone.it/stepper/
 */


/**
 * @module CustomEvent polyfill
 */


/**
 * @module       MultiToggles
 * @author       ATOM
 * @license      MIT
 * @see          https://codepen.io/OXAYAZA/pen/eRbYjV
 * @version      2.0.0
 * @description  Allows you to use multiple toggles to switch class "active" on the target,
 *               itself and other toggles linked to the same target.
 */


/**
 * @module       RD Range
 * @author       Roman Kholiavko
 * @see          http://cms.devoffice.com/coding-demo/marathoner/rd-range/documentation
 * @version      1.0
 */


/**
 * @module       jQuery Mousewheel
 * @license      MIT
 * @version      3.1.13
 */

/**
 * @module       jQuery Mousewheel
 * @author       2014 Kelvin Luck & 2017-2018 Tuukka Pasanen
 * @see          http://jscrollpane.kelvinluck.com/
 * @license      Dual licensed under the MIT or GPL licenses.
 * @version      2.1.2-rc.1
 */


/**
 * @module  αUtil
 * @version v1.0.1
 * @desc    Service functions for α-modules
 * @author  OXAYAZA {@link https://github.com/OXAYAZA}
 * @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
 * @see     {@link https://www.linkedin.com/in/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B1%D0%B0%D0%B7%D0%B0%D0%B5%D0%B2-166479165/}
 */

/**
 * @module   αCounter
 * @version  v0.1.1
 * @author   OXAYAZA {@link https://github.com/OXAYAZA}
 * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
 * @requires module:αUtil
 * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
 */

/**
 * @module   αProgressCircle
 * @version  v0.1.1
 * @author   OXAYAZA {@link https://github.com/OXAYAZA}
 * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
 * @requires module:αUtil
 * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
 */

/**
 * @module   αCountdown
 * @version  v0.1.1
 * @author   OXAYAZA {@link https://github.com/OXAYAZA}
 * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
 * @requires module:αUtil
 * @requires module:αProgressCircle
 * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
 */

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/
      },
      {
        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
    })


  ])
}

main.js

import Vue from 'vue';
import App from './App.vue';
import Header from './Header.vue';
import Home from './Home.vue';
import Footer from './Footer.vue';


Vue.component('app-header',Header);
Vue.component('app-home',Home);
Vue.component('app-footer',Footer);


new Vue({
  el: '#app',
  render: h => h(App)
});

我在Footer.vue中导入core.min.js：

<!-- Page Footer-->
      <!-- Pre footer section-->
<template>

  <div>
    Test
  </div>  

</template>

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

export default {
    name: 'Footer'
  }

App.vue

<template>
  <div id="app">

    <div class="page">

      <app-header></app-header>
      <app-home></app-home>
      <app-footer></app-footer>

    </div>  

  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
  @import '//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900';
  @import './assets/css/style.css';
  @import './assets/css/fonts.css';
</style>

注意：在所有vue文件中仅导入core.min.js文件。

项目目录的图像

找不到模块：错误：无法在webpack中解析'jquery'

0 个答案: