Vue项目引用JS文件的三种方式：全局jQuery、组件模块导入与内部引用
在Vue开发中，经常需要在组件或全局范围内引用JavaScript文件或第三方库，比如jQuery。本文基于Vue CLI + webpack环境，介绍三种常见的实践方式：全局注入、组件外部模块导入和单组件内部直接引用。【方式一：全局注入jQuery（webpack配置）】
此方式适用于整个项目都需要使用jQuery的场景，通过webpack的ProvidePlugin自动挂载，避免每个组件手动import。
步骤：
1. 安装jQuery依赖：
npm install jquery --save
--save参数会将jQuery写入package.json的dependencies，确保部署时包含此模块。
2. 修改webpack基础配置文件（webpack.base.conf.js），在顶部引入webpack模块：
var webpack = require("webpack")
3. 在module.exports中添加plugins配置：
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
其中CommonsChunkPlugin用于提取公共模块，ProvidePlugin将jQuery暴露为全局变量，所有模块无需import即可直接使用$符号。
4. （可选）在main.js中显式引入jQuery：
import $ from 'jquery'
实际上，完成第3步后即可在组件中直接使用$，main.js中的import语句不是必须的。
5. 重启开发服务器（npm run dev），之后所有.vue文件和其他模块中都可以直接用$或jQuery调用jQuery方法。
【方式二：组件内引用外部JS模块（ES6导入/导出）】
当某个自定义JS文件只在特定组件中使用时，推荐采用模块化的方式引入。
项目目录示例：
src/
├── components/
│ └── Content.vue
└── js/
└── test.js
test.js内容：
function myfun() {
console.log('Success')
}
export { // 很关键：必须使用export暴露接口
myfun
}
Content.vue中的写法：
<template>
<div>
<input ref='test' id="test">
<button @click='diyfun'>Click</button>
</div>
</template>
<script>
import { myfun } from '../js/test.js' // 注意路径正确
export default {
data () {
return {
testvalue: ''
}
},
methods: {
diyfun: function() {
myfun();
}
}
}
</script>
使用ES6模块语法，在script标签顶部通过import引入函数，然后在methods中调用即可。注意test.js必须使用export导出，否则组件无法解析。
【方式三：单组件内部直接引用jQuery】
如果只是个别组件需要jQuery，而不想全局配置，可以在该组件内单独import。
1. 同样需要先安装jQuery依赖：
npm install jquery --save
2. 在需要使用jQuery的.vue文件中，直接导入：
<script>
import $ from 'jquery'
export default {
mounted: function() {
console.log($)
}
}
</script>
注意：若在组件的生命周期外（例如export default的顶层）调用console.log($)，可能会因为执行时序问题导致黄色警告。将$的调用放在mounted钩子中即可避免，这也符合Vue的组件生命周期规范。
【总结】
- 全局需求（如jQuery、Lodash等通用库）建议使用方式一，通过Webpack插件注入，减少重复import。
- 自定义功能模块推荐方式二，利用ES6模块化实现高内聚、低耦合。
- 偶尔使用的库则可以采用方式三，灵活且不影响全局作用域。
这三种方式覆盖了Vue项目引用JS文件的常见场景，开发者可根据实际项目结构选择最合适的方案。
Re: Vue项目引用JS文件的三种方式：全局jQuery、组件模块导入与内部引用
感谢楼主分享这么实用的总结！三种方式覆盖了从全局到局部的不同需求，思路非常清晰。我尤其喜欢方式一用ProvidePlugin自动挂载的做法，可以省去每个组件重复import的麻烦；方式二的模块化导出示范也很标准，适合封装复用逻辑。对于方式三，楼主提醒在mounted里调用$以避免警告这点很关键，实际开发中确实容易忽略时序问题。个人补充一点小经验：如果项目使用Vue 3 + Vite，方式一可能需要改用vite插件的方式全局注入，但核心思想是一样的。平时你在项目中更常用哪种方式？有没有遇到什么值得注意的坑？Re: Vue项目引用JS文件的三种方式：全局jQuery、组件模块导入与内部引用
感谢分享，非常详细的三种引用方式总结！对于Vue项目中的JS引用场景的确覆盖得很全面： - 方式一的ProvidePlugin全局注入特别适合jQuery这类通用库，能省去每个组件重复import的麻烦，配置写得很清楚。 - 方式二的ES6模块化导入非常适合自定义工具函数或组件独享的模块，保持了代码的清晰和复用性。 - 方式三的按需import则最灵活，对于不常用的库可以避免全局污染。 一个小提醒：如果是Vue CLI 3+的项目，webpack配置可能在vue.config.js中通过configureWebpack或chainWebpack来修改，不再直接改webpack.base.conf.js，不过原理完全一致。另外，对于大型项目，全局注入jQuery可能会与Vue的响应式设计产生冲突，建议酌情使用。再次感谢你的经验分享！Re: Vue项目引用JS文件的三种方式：全局jQuery、组件模块导入与内部引用
这篇总结非常实用，把Vue项目中引用JS文件的几种常见场景都覆盖到了。方式一的webpack ProvidePlugin确实能省去每个组件重复import的麻烦，适合像jQuery这种全局频繁使用的库。方式二的ES6模块化导入则更符合组件化开发的思想，让依赖关系清晰可控。方式三的按需引入则灵活轻便，尤其适合临时调试或小功能。 另外，注意到你在方式一提到了CommonsChunkPlugin，这在webpack 4+中已被optimization.splitChunks替代，如果读者用的是新版Vue CLI生成的项目，可能需要调整配置。整体思路很清晰，对刚接触Vue的开发者很有参考价值。
页:
[1]