Laravel9+Vue通过Laravel Mix集成ClipboardJS引用失败问题

现存问题直接原因 #

• 配置重复打包：自定义的resources/js/clipboard.js属于冗余文件，webpack.mix.js中单独打包该文件的配置无意义，且未正确引入ClipboardJS依赖，组件内访问不到ClipboardJS构造函数
• DOM获取写法错误：document.getElementById('#password')多写了CSS选择器前缀#，该方法参数仅需传入纯id字符串，执行后返回null，传入ClipboardJS构造函数直接触发报错中断
• 实例化逻辑错误：每次点击触发方法时重复新建ClipboardJS实例，既不符合库的使用规范，也会造成内存泄漏

分步操作 #

1. 修正依赖与构建配置 #

• 项目根目录执行依赖安装命令：

npm install clipboard --save

• 删除冗余文件：移除自建的resources/js/clipboard.js文件
• 修改webpack.mix.js，删除单独打包clipboard文件的冗余规则，最终配置如下：

mix.js("resources/js/app.js", "public/js")
 .vue()
 .postCss("resources/css/app.css", "public/css", [
   require("tailwindcss"),
 ]);

• 清理resources/js/app.js冗余引入：删除import './clipboard';这行代码，无需全局提前引入该库。

2. 修正Vue组件代码 #

ClipboardJS不需要在点击事件中实例化，正确逻辑是组件DOM挂载完成后初始化实例，组件销毁时销毁实例避免内存泄漏，参考代码如下：

<template>
  <div>
    <!-- 被复制内容的元素，注意id不要加#前缀 -->
    <input id="password" type="text" :value="mediaDetails.password" readonly />
    <!-- 触发复制的按钮，id和初始化时的选择器对应 -->
    <button id="copyBtn">复制密码</button>
  </div>
</template>

<script>
// 组件内直接引入ClipboardJS构造函数
import ClipboardJS from 'clipboard';
export default {
  props: ['mediaDetails'],
  data() {
    return {
      clipboardIns: null
    }
  },
  mounted() {
    // DOM渲染完成后初始化实例
    this.clipboardIns = new ClipboardJS('#copyBtn', {
      target: () => document.getElementById('password')
    });

    // 绑定复制成功回调
    this.clipboardIns.on('success', (e) => {
      alert('复制成功');
      e.clearSelection();
    });

    // 绑定复制失败回调
    this.clipboardIns.on('error', () => {
      alert('复制失败，请手动选择内容复制');
    });
  },
  beforeUnmount() {
    // 组件销毁前清理实例
    if (this.clipboardIns) {
      this.clipboardIns.destroy();
    }
  }
}
</script>

3. 重新构建验证 #

执行构建命令重新打包前端资源：

npm run dev
# 生产环境执行 npm run prod

清空浏览器缓存后测试，点击复制按钮即可正常触发复制逻辑，不会再出现代码执行中断的问题。

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