Question

运行vuejs webpack项目时，我在浏览器控制台中遇到此错误。

我在core.min.js中最小化了js文件。

jquery最小化的js被添加到core.min.js中。

要查看core.min.js的代码，请检查 https://drive.google.com/open?id=1VVbjO1mlOIIuZ61moP0tUjs6E9G6kGtM

和script.js检查 https://drive.google.com/open?id=1943_EkPsDP0-M0qI1KXkK81sru0yVvzl

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}
 */

App.vue

<script>

import VueInjectJs from 'vue-inject-js'


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

<template>
  <div id="app">


    <div class="page">

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

    </div>  

    <VueInjectJs src="src/assets/js/core.min.js" />
    <VueInjectJs src="src/assets/js/script.js" />

  </div>
</template>

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

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:#">info@demolink.org</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";
  //import "./assets/js/script.js";

  /*export default {
    name: 'Footer'
  }*/

</script>

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

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


  ])
}

package.json

{
  "name": "vue-webpack",
  "description": "IABC project",
  "version": "1.0.0",
  "author": "jaouni",
  "license": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.11",
    "vue-inject-js": "^1.0.0",
    "vue-style-loader": "^4.1.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "popper.js": "^1.16.0",
    "url-loader": "^2.2.0",
    "vue-loader": "^13.0.5",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.1"
  }
}

项目目录的图像

Answer 1

运行npm i -S jquery 然后添加到script.js import $ from 'jquery'

未捕获的ReferenceError：$在Vuejs Webpack项目中未定义

1 个答案: