Vue项目引用JS文件的三种方式：全局jQuery、组件模块导入与内部引用

脚本专家

在Vue开发中，经常需要在组件或全局范围内引用JavaScript文件或第三方库，比如jQuery。本文基于Vue CLI + webpack环境，介绍三种常见的实践方式：全局注入、组件外部模块导入和单组件内部直接引用。

【方式一：全局注入jQuery（webpack配置）】
此方式适用于整个项目都需要使用jQuery的场景，通过webpack的ProvidePlugin自动挂载，避免每个组件手动import。

步骤：
1. 安装jQuery依赖：

2. npm install jquery --save

复制代码

--save参数会将jQuery写入package.json的dependencies，确保部署时包含此模块。

2. 修改webpack基础配置文件（webpack.base.conf.js），在顶部引入webpack模块：

2. var webpack = require("webpack")

复制代码

3. 在module.exports中添加plugins配置：

2. plugins: [
3.   new webpack.optimize.CommonsChunkPlugin('common.js'),
4.   new webpack.ProvidePlugin({
5.     jQuery: "jquery",
6.     $: "jquery"
7.   })
8. ]

复制代码

其中CommonsChunkPlugin用于提取公共模块，ProvidePlugin将jQuery暴露为全局变量，所有模块无需import即可直接使用$符号。

4. （可选）在main.js中显式引入jQuery：

2. import $ from 'jquery'

复制代码

实际上，完成第3步后即可在组件中直接使用$，main.js中的import语句不是必须的。

5. 重启开发服务器（npm run dev），之后所有.vue文件和其他模块中都可以直接用$或jQuery调用jQuery方法。

【方式二：组件内引用外部JS模块（ES6导入/导出）】
当某个自定义JS文件只在特定组件中使用时，推荐采用模块化的方式引入。

项目目录示例：

2. src/
3. ├── components/
4. │   └── Content.vue
5. └── js/
6.     └── test.js

复制代码

test.js内容：

2. function myfun() {
3.   console.log('Success')
4. }
5. export { // 很关键：必须使用export暴露接口
6.   myfun
7. }

复制代码

Content.vue中的写法：

2. <template>
3. <div>
4.   <input ref='test' id="test">
5.   <button @click='diyfun'>Click</button>
6. </div>
7. </template>
8. <script>
9. import { myfun } from '../js/test.js' // 注意路径正确
11. export default {
12.   data () {
13.     return {
14.       testvalue: ''
15.     }
16.   },
17.   methods: {
18.     diyfun: function() {
19.       myfun();
20.     }
21.   }
22. }
23. </script>

复制代码

使用ES6模块语法，在script标签顶部通过import引入函数，然后在methods中调用即可。注意test.js必须使用export导出，否则组件无法解析。

【方式三：单组件内部直接引用jQuery】
如果只是个别组件需要jQuery，而不想全局配置，可以在该组件内单独import。

1. 同样需要先安装jQuery依赖：

2. npm install jquery --save

复制代码

2. 在需要使用jQuery的.vue文件中，直接导入：

2. <script>
3. import $ from 'jquery'
4. export default {
5.   mounted: function() {
6.     console.log($)
7.   }
8. }
9. </script>

复制代码

注意：若在组件的生命周期外（例如export default的顶层）调用console.log($)，可能会因为执行时序问题导致黄色警告。将$的调用放在mounted钩子中即可避免，这也符合Vue的组件生命周期规范。

【总结】
- 全局需求（如jQuery、Lodash等通用库）建议使用方式一，通过Webpack插件注入，减少重复import。
- 自定义功能模块推荐方式二，利用ES6模块化实现高内聚、低耦合。
- 偶尔使用的库则可以采用方式三，灵活且不影响全局作用域。
这三种方式覆盖了Vue项目引用JS文件的常见场景，开发者可根据实际项目结构选择最合适的方案。

热心网友7

感谢楼主分享这么实用的总结！三种方式覆盖了从全局到局部的不同需求，思路非常清晰。我尤其喜欢方式一用ProvidePlugin自动挂载的做法，可以省去每个组件重复import的麻烦；方式二的模块化导出示范也很标准，适合封装复用逻辑。对于方式三，楼主提醒在mounted里调用$以避免警告这点很关键，实际开发中确实容易忽略时序问题。个人补充一点小经验：如果项目使用Vue 3 + Vite，方式一可能需要改用vite插件的方式全局注入，但核心思想是一样的。平时你在项目中更常用哪种方式？有没有遇到什么值得注意的坑？