WordPress Vue单文件组件插件报错：import语句无法使用

兄弟，我当初刚在WP里搭Vue插件的时候也踩过这个坑！你遇到的Uncaught SyntaxError: Cannot use import statement outside a module错误，本质是两个核心问题：WordPress默认不按ES模块加载脚本，加上浏览器原生无法识别.vue单文件组件。下面给你分步解决：

1. 让WordPress把脚本当作ES模块加载 #

WordPress的wp_register_script支持通过参数添加脚本属性，我们需要给vuecode.js标记为ES模块。修改你的custom_plugin_name.php里的脚本注册函数：

function func_load_vuescripts() {
    // 注意：如果用Vue3，换成模块版本CDN：https://unpkg.com/vue@3/dist/vue.esm-browser.js
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js');
    
    // 给vuecode.js添加type="module"属性
    wp_register_script(
        'my_vuecode', 
        plugin_dir_url( __FILE__ ) . 'vuecode.js', 
        ['wpvue_vuejs'], 
        true, 
        [
            'type' => 'module' // 关键：标记为ES模块
        ]
    );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

2. 处理.vue单文件组件的兼容性问题 #

浏览器原生没办法解析.vue文件（它包含template/script/style三个独立块），有两个实用选项：

选项A：放弃单文件组件，直接写原生Vue代码（快速验证） #

把组件逻辑合并到vuecode.js里，同时修改短代码返回Vue挂载容器：

修改custom_plugin_name.php的短代码函数：

function func_wp_vue() {
    wp_enqueue_script('wpvue_vuejs');
    wp_enqueue_script('my_vuecode');
    // 返回Vue挂载的容器，而非App.vue内容
    return '<div id="vuejs-container"></div>';
}
add_shortcode( 'wpvue', 'func_wp_vue' );

修改vuecode.js（以Vue2为例）：

// 定义表格组件
const AppTable = {
    template: `
        <table border="1" cellpadding="8">
            <thead>
                <tr>
                    <th>文章标题</th>
                    <th>发布日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.title.rendered }}</td>
                    <td>{{ new Date(post.date).toLocaleDateString() }}</td>
                </tr>
            </tbody>
        </table>
    `,
    data() {
        return {
            posts: []
        }
    },
    mounted() {
        // 调用WP REST API获取文章数据
        fetch('/wp-json/wp/v2/posts')
            .then(res => res.json())
            .then(data => this.posts = data)
            .catch(err => console.error('获取数据失败：', err));
    }
};

// 定义根组件
const App = {
    template: `
        <div>
            <h1>My Todo App!</h1>
            <AppTable />
        </div>
    `,
    components: {
        AppTable
    }
};

// 挂载到页面容器
new Vue({
    el: '#vuejs-container',
    render: h => h(App)
});

选项B：用构建工具打包单文件组件（推荐复杂项目） #

如果想保留.vue组件的开发体验，用Vite或Webpack打包代码：

1. 用npm create vite@latest创建Vue项目，迁移你的.vue组件
2. 修改Vite配置适配WordPress插件路径
3. 运行npm run build，把dist目录的assets文件复制到插件目录
4. 在custom_plugin_name.php里注册打包后的脚本（同样添加type="module"）

额外注意点 #

• 确认WordPress REST API已开启（默认开启，无特殊权限修改即可）
• Vue版本要对应：Vue2和Vue3的CDN链接、代码写法差异较大，别混着用
• 若站点有缓存插件，测试前记得清缓存

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