用npm安装并生成jQuery文件后，无法使用vendor.js

问题描述：用npm安装并生成jQuery文件后，无法使用vendor.js

解答：

首先，npm是Node Package Manager的缩写，是Node.js的包管理工具，用于安装、管理和发布JavaScript模块。通过npm可以方便地安装各种前端库和框架，包括jQuery。

当使用npm安装jQuery后，一般会在项目的node_modules目录下生成jQuery的文件。但是，直接使用这些文件可能会出现无法使用的问题，可能是因为没有将jQuery的文件引入到项目中。

解决这个问题的方法是，在项目的HTML文件中手动引入jQuery的文件。可以通过以下步骤来实现：

打开项目的HTML文件，找到需要使用jQuery的地方。
在<head>标签中添加一个<script>标签，用于引入jQuery的文件。可以使用相对路径或绝对路径来指定文件的位置。
在<script>标签中，使用src属性指定jQuery文件的路径。例如：<script src="path/to/jquery.js"></script>。
确保jQuery文件的路径是正确的，并且文件存在于指定的位置。
保存HTML文件并重新加载页面。

这样，就可以在项目中使用jQuery了。

关于vendor.js文件，它通常是用于存放第三方库或框架的文件，类似于一个打包文件。如果无法使用vendor.js，可能是因为没有正确引入或配置相关的依赖项。

如果你使用的是Webpack等打包工具，可以检查相关的配置文件，确保vendor.js文件被正确引入和打包。

如果你没有使用打包工具，可以尝试手动引入vendor.js文件，方法与引入jQuery的文件类似。

总结：

使用npm安装并生成jQuery文件后，无法使用vendor.js的问题，一般是因为没有正确引入相关文件或配置依赖项。通过手动引入jQuery文件，并确保vendor.js文件被正确引入和配置，可以解决这个问题。

腾讯云相关产品推荐：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai

相关·内容

Vue加载优化，速度提高一倍。

可以看到，项目中vendor.js文件最大，为 184.9 KB，该文件是Vue打包的时候自动生成的；通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的，如果没有使用可以进行删除。...此外，把鼠标移到某个文件上面，还可以看到提示如果采用 gzip 压缩后的大小，比如vendor.js提示如果采用 gzip 进行压缩，压缩后的大小为61.26 KB，文件变小了，加载速度自然就快了嘛。...然而压缩转化之后的代码和源代码之间的差异很大，当出现问题的时候会造成无法 DEBUG的问题，而编译后的 .map 文件主要是我们用来进行错误定位的。...了解了.map文件作用之后，我们在本地开发测试的时候可以使用.map来进行调试，上生产了之后，bug基本修改完毕，所以在编译打包的时候可以不生成.map文件。...首先安装压缩插件，在项目根目录下执行如下命令安装： npm install --save-dev compression-webpack-plugin 然后把 config/index.js文件的「

1.5K2 0

Vue 网站首页加载优化

Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用，其他就是对接口优化等 1. vendor.js...gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要 3.2 nginx gzip如何配合vue使用事先用Vue生成的...nginx，如何添加模块，和添加第三方模块安装完http_gzip_static_module模块后，使用 nginx -V 命令查看是否模块加载成功 3.4 nginx gzip 详细配置打开nginx...表示使用已经压缩好的gz文件，根据请求配合vue生成的gz文件 gzip_min_length 1k; gzip_http_version 1.1; gzip_types...vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用，其他就是对接口优化等。

1.5K2 2

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖 // 初始化包 npm init -y // 安装依赖 npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件

3.2K2 0

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.1K1 0

Webpack最佳实践指南

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.2K2 0

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.2K3 0

(1724) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

2. npm安装方式对比假如我们要在项目中使用jquery库。...采用（2.1~2.3三种方式） 2.1 全局安装 npm install jquery 或者 npm install jquery -g 安装完成后，会发现在package.json中并不存在这个包的依赖...使用这种安装方式我们可以直接在命令行里使用。当我们把项目拷贝给别人继续开发，或者别人把我们发布到的git上代码clone下来，使用npm install安装相关包时就会缺少这个jquery包。...项目就会无法正常运行，所以这也是我们最不赞成的安装方法。...2.2 安装到生成环境安装指令为： npm install jquery --save 它存在于package.json的dependencies中，它是生产环境需要依赖的包（上线时需要的依赖包）。

7872 0

npm包管理器基本使用

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。...由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。...初始化输入npm init -y 然后后它会在目录生成在package.json中，存储着你安装的包的信息（比如版本等）安装包接着我们安装jquery包输入npm install jquery...它会自动安装jquery（默认为最新版本）,也许你需要别的版本的jquery，那么你需要输入npm install jquery@版本号回车后会自动安装，生成一个名为node_modules的文件，...引用包文件目录：node_moudles>>>dist>>>你想要的文件前面提到，安装了jquery包生成node_modules的文件夹，在这个文件夹下，我们可以看到jquery这个文件夹，打开后可以看到

6031 0

webpack

源代码目录新建 src/index.html 首页和 src/index.js 文件初始化首页基本的结构运行 npm install jquery -S命令，安装 jQuery,其中-S 是–...run执行，如npm run dev 执行 npm run dev命令，启动 webpack 进行项目的打包构建更换使用的 js 文件为新生成的 js 文件 <script src=".....原因：开发环境下，打包生成的文件存在于内存中，无法获取到最终生成的文件 开发环境下，打包生成的文件不会出现代码压缩和性能优化配置 webpack 的打包发布在 package.json 文件的 script...会覆盖webpack.config.js中的model选项 } 执行 npm run dev 命令后，会发现生成的 js 文件、图片文件（只有 base64 格式的图片会生成）和 index.html...当程序出错时，可以直接在控制台显示错误行的位置，并定位到具体的源代码。默认生成的 Source Map 记录的是生成后的代码的位置，会导致报错时的行数与源代码的行数不一致。

1.6K3 0

webpack配置React开发环境(上)

安装 Webpack：npm install -g webpack。 Webpack 使用一个名为 webpack.config.js 的配置文件。...CSS，然后使用CSS-loader预处理CSS文件。...css-loader' }, ] } }; 注意，你必须使用两个加载器来转换CSS文件。...首先是CSS-loader读取CSS文件，另一个是Style-loader将Style标签插入HTML页面。不同的装载器通过感叹号（！）链接。启动服务器后，index.html将具有内部样式表。...启动服务器后，small.png和big.png将有以下URL。

1.6K13 0

npm bower安装和使用

http://www.jianshu.com/p/d9e46b5a8f80 npm 在windows 普通的bush 安装很慢应该在 git下安装才会很快的注：bower下载安装依赖库实际上是使用git...Git setup 2，之后就可以用npm包管理工具下载并全局安装bower: >npm install -g bower 全局安装bower 后，可以查看Bower的帮助信息，使用命令：...>bower help 3，初始化当前工程的bower，此操作会在当前目录下生成bower.json文件： >bower init ---- bower的使用使用了bower的项目都会在目录下有一个...在该文件同级目录下，使用如下命令即可安装相关依赖库。...除了用包名安装，也可以指定git地址，进行安装，如bower install https://github.com/jquery/jquery。

2.6K1 0

Vue首屏加载速度优化，提升80%以上

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。...若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。...首先安装webpack的可视化资源分析工具，命令行执行： npm i webpack-bundle-analyzer -D复制代码 2...., 并使用optimize-css-assets-webpack-plugin来压缩CSS文件。...详细见vue官网最终优化后的效果如下图：vendor.js文件从1M以上优化到256K左右，体积减少接近80%，排除服务器影响的因素，界面渲染速度基本都在1s左右，达到秒开效果，比之前快

1.7K2 0

Webpack的异步加载原理及分包策略(深度好文，建议收藏)

举个例子需求：main.js 依赖两个 js 文件：A.js 是点击 aBtn 按钮后，才执行的逻辑，B.js 是点击 bBtn 按钮后，才执行的逻辑。...webpackJsonp.push 的的值，两个参数分别为异步加载的文件中存放的需要安装的模块对应的 id 和异步加载的文件中存放的需要安装的模块列表。在满足某种情况下，会执行具体模块中的代码。...我们先用 webpack-bundle-analyzer 分析打包后的模块依赖及文件大小，确定优化的方向在哪。 ? 然后我们再看下打包出来的 js 文件 ?...看到这两张图的时候，我内心是崩溃的，槽点如下打包后生成多个将近 1M 的 js 文件，其中不乏 vendor.js 首页必须加载的大文件 xlsx.js 这样的插件没必要使用，导出 excel 更好的方法应该是后端返回文件流格式给前端处理...npm 依赖包 npm uninstall vue iview echarts xlsx --save 此时我们在来看一下打包后的情况 ?

4.5K3 1

愿未来没有 Webpack

用 @pika/web 安装的 npm 包可以直接在浏览器中运行。这样的话你还需要一个打包工具（bundler）吗？ ? 现在是 1941 年。你的名字是 Richard Hubbell。...用 @pika/web 安装的现代 npm 依赖可以直接在浏览器中运行，即使这些依赖包本身也有它们自己的依赖包。一步搞定。它不是一个构建工具，也不是一个（传统意义的）打包工具。...安装后的依赖包之所以能够在浏览器中运行，是因为 @pika/web 把每个包打包成了一个单独的、Web 环境能够支持的 ESM 模块 .js 文件。...当你把所有依赖包打包成一个庞大的 vendor.js 文件，每当更新一个依赖，你就不得不迫使用户重新下载整个 vendor.js。...用现代 ESM 语法写代码，用 @pika/web 安装可以直接在 Web 环境运行的 npm 依赖包。不需要什么工具。你可以随时添加工具。

6492 0

webpack实战——打包优化【中】

当一段相同的子程序被多个程序调用时，为了减少内存消耗，可以将这段子程序存储为一个可执行文件，当被多个程序调用时只在内存中生成和使用同一个实例。...不过区别还是有的，DLLPlugin实际生成的文件是JS文件而不是动态链接库。在打包vendor的时候还会附加生成一份vendor的模块清单，这份清单将会在工程业务模块打包时起到链接和索引的作用。..."dll": "webpack --config webpack.vendor.config.js" } } 然后执行npm run dll，会发现生成了一个dll目录，里面对应有两个文件： vendor.js... 设置完毕后，当页面执行到vendor.js...现假设我们工程目录中有如下资源文件，并每个资源都加上了chunk hash： vendor@[hasn].js pageUser@[hasn].js pageIndex@[hasn].js util@[

8805 0

Webpack入门

首先运行npm init，生成package.json文件。...插件后，运行时会报错，所以建议本地安装。...添加多个模块假设这个项目需要用到jQuery，打开命令行工具，安装它： npm install jquery -save 这会在webpack-tutorial目录下生成一个node_modules文件夹...，通过npm安装的的模块都会在这个文件夹下。...如此一来，我们希望将css文件生成到dist/css文件夹中，再通过传统的方式用link标签进行引用，而不是生成到list.js脚本中。

1.8K2 0

webpack（4.8.3）总结

参数代替二、安装 1、全局安装：npm install --save webpack webpack-cli 2、局部安装：即进入项目目录安装webpack、webpack-cli（推荐），如全局安装...，因版本不同，不便于维护 3、使用npm init初始化package.json(需要在webpack及webpack-cli安装后在初始化package.json,否则会报错) 项目目录结构如下(.idea...为输出文件，即打包生成的文件所放置的目录例： webpack '....//如需生成多个html页面，则new HtmlWebpackPlugin()多个 //如使用jade/pug等html模版，则需要安装对应的loader，并在module.rules新增解析规则...7、第三方JS库的引入,以下讲述种种不同引入库的方法方法一、使用npm包安装的库，如npm I jquery 在插件配置中新增一个webpack自带的插件 Plugins:[ //使用以下

7404 0

webpack（4.8.3）总结之一

参数代替二、安装 1、全局安装：npm install --save webpack webpack-cli 2、局部安装：即进入项目目录安装webpack、webpack-cli（推荐），如全局安装...，因版本不同，不便于维护 3、使用npm init初始化package.json(需要在webpack及webpack-cli安装后在初始化package.json,否则会报错) 4、根目录下创建webpack.config.js...为输出文件，即打包生成的文件所放置的目录例： webpack '....//如需生成多个html页面，则new HtmlWebpackPlugin()多个 //如使用jade/pug等html模版，则需要安装对应的loader，并在module.rules新增解析规则...7、第三方JS库的引入,以下讲述种种不同引入库的方法方法一、使用npm包安装的库，如npm I jquery 在插件配置中新增一个webpack自带的插件 Plugins:[ //使用以下

8164 0

React多页面应用4(webpack4 提取第三方包及公共组件)

webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10 5、React多页面应用5(webpack4 多页面自动化生成多入口文件...,打包成zip等)---2018.04.16 9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17 开发环境:Windows 8,node v8.9.1,npm...2、新建common目录，并新建Header.jsx 及 Footer.jsx Header.jsx import React from 'react'; import '../.....多出来三个文件分别是： manifest.js（包清单） vendor.js(第三方包，明显体积很大，这是开发环境，生产环境会再压缩) common.js（公共组件）此时浏览器应该是空白，因为缺少这三个文件...7、修改html文件 devBulid 下 index.html <!

1.9K5 0

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

2、使用 npm 安装包　　这篇文章的示例项目，我采用的是 ASP.NET Core 2.2 默认生成的 MVC 项目，因为在写文章的过程中有过更换解决方案，所以文章中的截图可能会出现名称前后不对应的情况...可以看到，安装完成后，npm 提示我们 bootstrap 依赖于 jquery 和 popper.js，所以这里我们手动添加上这两个依赖的组件。　　...当我们安装 jquery 的 1.9.1 版本后，因为之前的 jquery 版本存在一些安全隐患，所以 npm 会提示我们执行 npm audit 命令来查看当前项目中可能存在的安全隐患，以及对于如何解决这些隐患的建议...latest：始终安装包的最新版本。　　3、gulp 配置当我们通过 npm 添加好需要使用的组件包后，就需要考虑如何在项目中使用。　　...js 压缩到一个 js 文件后的路径 //使用 npm 下载的前端组件包 const libs = [ { name: "jquery", dist: ".

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

用npm安装并生成jQuery文件后，无法使用vendor.js

相关·内容

Vue加载优化，速度提高一倍。

Vue 网站首页加载优化

Webpack最佳实践

Webpack最佳实践

Webpack最佳实践指南

Webpack最佳实践

(1724) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

npm包管理器基本使用

webpack

webpack配置React开发环境(上)

npm bower安装和使用

Vue首屏加载速度优化，提升80%以上

Webpack的异步加载原理及分包策略(深度好文，建议收藏)

愿未来没有 Webpack

webpack实战——打包优化【中】

Webpack入门

webpack（4.8.3）总结

webpack（4.8.3）总结之一

React多页面应用4(webpack4 提取第三方包及公共组件)

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐