如何在Laravel Blade模板中使用chessboard.js与chess.js

一、错误原因分析 #

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module，本质是直接使用ES模块语法（import）但未将脚本标记为模块，或加载的库版本与加载方式不匹配（比如用非模块方式加载纯ES模块版本的库）。

二、Laravel Blade 模板场景解决方案 #

1. 用全局对象方式加载（推荐，无需模块配置） #

直接加载UMD版本的库，这类版本会在全局挂载Chess和Chessboard对象，无需import：

• 先在Blade模板的</body>标签前添加资源引入（别放head里，避免DOM未加载完成）：

<!-- 引入chessboard样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard.js/1.0.0/chessboard-1.0.0.min.css">

<!-- 引入chess.js和chessboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/1.0.0/chess.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard.js/1.0.0/chessboard-1.0.0.min.js"></script>

<!-- 初始化棋盘逻辑 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 先确保页面有棋盘容器
    if (!document.getElementById('board')) {
        const boardContainer = document.createElement('div');
        boardContainer.id = 'board';
        boardContainer.style.width = '400px';
        document.body.appendChild(boardContainer);
    }

    // 初始化棋盘
    const board = Chessboard('board', {
        position: 'start'
    });

    // 初始化象棋逻辑实例
    const game = new Chess();
});
</script>

• 如果使用本地资源，将库文件放到public/css和public/js目录，用Laravel的asset()函数引入：

<link rel="stylesheet" href="{{ asset('css/chessboard-1.0.0.min.css') }}">
<script src="{{ asset('js/chess.min.js') }}"></script>
<script src="{{ asset('js/chessboard-1.0.0.min.js') }}"></script>

2. ES模块方式加载 #

如果坚持用import，需要给脚本标签添加type="module"属性：

<!-- 在body末尾引入你的自定义脚本 -->
<script type="module" src="{{ asset('js/chess-game.js') }}"></script>

然后在public/js/chess-game.js中使用ES模块语法（注意加载对应ES版本的库）：

import Chess from 'https://cdn.jsdelivr.net/npm/chess.js@1.0.0/dist/chess.esm.js';
import Chessboard from 'https://cdn.jsdelivr.net/npm/chessboard.js@1.0.0/dist/chessboard.esm.js';

document.addEventListener('DOMContentLoaded', () => {
    const board = Chessboard('board', { position: 'start' });
    const game = new Chess();
});

三、Laravel + Vue 项目场景解决方案 #

1. 安装依赖 #

先通过npm安装官方包：

npm install chess.js chessboard.js

2. Vue组件中使用 #

在Vue组件内直接导入并初始化，注意在mounted钩子中操作（确保DOM已渲染）：

<template>
  <div id="board" style="width: 400px;"></div>
</template>

<script>
// 导入库
import Chess from 'chess.js';
import Chessboard from 'chessboard.js';
// 导入样式
import 'chessboard.js/dist/chessboard.min.css';

export default {
  data() {
    return {
      board: null,
      game: null
    }
  },
  mounted() {
    // 初始化棋盘
    this.board = Chessboard('board', {
      position: 'start'
    });
    // 初始化象棋逻辑
    this.game = new Chess();
  },
  beforeUnmount() {
    // 页面销毁前销毁棋盘，避免内存泄漏
    this.board?.destroy();
  }
}
</script>

• 如果遇到导入报错，可改用require方式兼容：

const Chessboard = require('chessboard.js').default;

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