Laravel集成Vite环境下如何导入自定义JavaScript文件？

一、解决自定义JS文件不生效的问题 #

你在vite.config.js里的输入配置本身是正确的，但还需要完成以下步骤才能生效：

1. 启动Vite服务或构建资源

   • 开发环境：执行命令 npm run dev
   • 生产环境：执行命令 npm run build

2. 在Blade模板中正确引入资源
   使用Laravel提供的@vite指令，不要直接写静态文件路径：

   @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/test.js'])
   

   或者遵循Vite模块化思路，在resources/js/app.js中导入test.js：

   import './test.js';
   

   之后模板里只需引入主文件即可：

   @vite(['resources/sass/app.scss', 'resources/js/app.js'])
   

二、添加第三方库的配置步骤 #

以常用库为例，分两种场景说明：

1. 按需引入库（比如lodash） #

• 安装库：

  npm install lodash
  

• 在需要使用的JS文件中导入并使用：

  // resources/js/test.js
  import _ from 'lodash';
  
  // 示例用法
  const debouncedLog = _.debounce(() => console.log('延迟执行'), 1000);
  debouncedLog();
  

2. 全局注入库（比如jQuery） #

• 先安装库和注入插件：

  npm install jquery
  npm install @rollup/plugin-inject --save-dev
  

• 修改vite.config.js配置全局注入：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import inject from '@rollup/plugin-inject';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/sass/app.scss',
                  'resources/js/app.js',
                  'resources/js/test.js',
              ],
              refresh: true,
          }),
          inject({
              $: 'jquery',
              jQuery: 'jquery',
          }),
      ],
  });
  

  配置完成后，所有JS文件和模板中都可以直接使用$或jQuery，无需手动导入。

三、常见排查点 #

• 开发环境下必须保证Vite服务器处于运行状态
• 生产环境必须执行npm run build生成编译后的资源文件
• 检查浏览器控制台，确认是否有资源加载失败的报错信息
• 核对Blade模板中的@vite指令，确保文件路径拼写正确

内容的提问来源于stack exchange，提问作者wtsuport