Vue+Vite项目用rollup-plugin-inject引入jQuery失败求助

问题描述 #

开发Vue+Vite项目时需要使用jQuery，但Vite不支持常规引入方式。尝试用rollup-plugin-inject配置后仍无法正常工作，还出现解析Vue文件的警告，jQuery功能未生效。

当前配置 #

vite.config.js：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    inject({
      $: 'jquery',
      jQuery: 'jquery',       
    }),
    vue(),
    
  ],
  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

main.js：

import { createApp } from 'vue'
import App from './App.vue'

import $ from 'jquery';
window.$ = window.jQuery = $;

createApp(App).mount('#app')

遇到的警告 #

[vite] warning: rollup-plugin-inject: failed to parse D:/vespagiri/src/components/Header.vue. Consider restricting the plugin to particular files via options.include
plugin: inject
File:D:/vespagiri/src/components/Header.vue 

解决方案 #

1. 限制rollup-plugin-inject的作用范围 #

警告原因是inject插件尝试解析Vue单文件组件（.vue），但它仅支持处理JS/TS文件。给插件添加include选项，指定仅对JS/TS文件生效：

// 修改vite.config.js中的inject配置
inject({
  $: 'jquery',
  jQuery: 'jquery',
  // 仅作用于JS和TS文件
  include: ['**/*.js', '**/*.ts']
}),

2. 简化全局变量配置（可选） #

如果仅需要全局使用$和jQuery，可以省略rollup-plugin-inject，直接通过Vite的define配置全局变量：

// vite.config.js中添加define配置
export default defineConfig({
  // ...其他配置
  define: {
    '$': 'window.$',
    'jQuery': 'window.jQuery'
  }
})

配置后组件中可直接使用$，无需额外导入。

3. 验证jQuery是否生效 #

在组件中添加测试代码：

<template>
  <div id="test-jquery"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  $('#test-jquery').text('jQuery已生效！')
  console.log(window.$) // 控制台输出jQuery对象则说明配置成功
})
</script>

4. 确认jQuery已安装 #

若未安装jQuery，先执行安装命令：

npm install jquery --save

内容的提问来源于stack exchange，提问作者Sabbir Ahmed Chowdhury