如何使用 Nuxt 正确加载 js 文件？奇怪的行为

Question

我有一个带有大量 js 文件（jQuery 和其他插件）的 HTML/CSS/JS 模板。现在，我想用 Nuxt.js 让它动态化。第一步是将 index.html 复制到 Nuxt 项目，并将 head-tag 之间的所有数据应用到 nuxt.config.js 以及所有 CSS 文件和 JS 文件。页面呈现，控制台没有给我任何错误。检查源代码告诉我，webpack 将所有 js 文件捆绑到 app.js 中，而 css-stuff 直接在源代码中。这就是我想要的行为。

但是有一个奇怪的“错误”。每次我加载页面时，都会出现一个非动态的模式，因此没有 JS 正在工作。我无法通过单击 X 来摆脱它。我搜索了该逻辑所在的文件，并在初始行中添加了一个“警报”以确保调用该文件。它可以工作，但是：一旦我将警报放在“$（function（）{ ...}）”中，它就不会被执行。在我的原始 HTML 项目中确实如此。

我不知道为什么它没有被执行。我也为 jQuery 安装了 npm 包。

可行：

;(function($){
	'use strict';
	
	alert("CHECK");
	
	$(function(){
		

		document.addEventListener("touchstart", function() {},false);

		if ('ontouchstart' in document.documentElement) {
			$('body').css('cursor', 'pointer');
		}
    
  ...........

事实并非如此：

;(function($){
	'use strict';
	
	
	$(function(){
		
		alert("CHECK");

		document.addEventListener("touchstart", function() {},false);

		if ('ontouchstart' in document.documentElement) {
			$('body').css('cursor', 'pointer');
		}

....................

我的nuxt.config.js 看起来像这样：

css: [
    "@/assets/css/style.css",
    "@/assets/css/responsive.css",
    "@/assets/css/bootstrap-grid.min.css"
  ],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    // JS Core Libs
    { src: "~/plugins/js/libs/jquery-2.2.4.min.js", mode: "client" },
    { src: "~/plugins/js/libs/jquery-ui.min.js", mode: "client" },
    { src: "~/plugins/js/libs/retina.min.js", mode: "client" },
    { src: "~/plugins/js/plugins/jquery.scrollTo.min.js", mode: "client" },
    { src: "~/plugins/js/plugins/jquery.localScroll.min.js", mode: "client" },


    // JS theme files
    { src: "~/plugins/js/plugins.js", mode: "client" },
    { src: "~/plugins/js/script.js", mode: "client" }
  ],
  /*
   ** Nuxt.js dev-modules
   */

Answer 1

自己去回答：

我必须在使用它的文件中导入 jQuery。我认为一个 npm install 就足够了......