具有单个文件组件的 WordPress Vue 插件 - 无法使用导入

Posted 2023-02-22

【中文标题】具有单个文件组件的 WordPress Vue 插件 - 无法使用导入

【英文标题】：WordPress Vue Plugin with single file component - cannot use import

【发布时间】：2020-10-09 17:24:09

【问题描述】：

我是 WP 和 Vue.js 的新手 我正在尝试在 Vue 中为 WP 创建一个插件，该插件从 WP API 获取数据并打印一个简单的表格。

这是我的插件文件：

custom_plugin_name.php

<?php

/**
 * Plugin Name: custom_plugin_name
 * Description: WordPress Vue.js plugin
 * Version: 1.0
 */


// Register API Endpoints
[...]


// Register scripts
function func_load_vuescripts() 
    // Register Vue.js and scripts
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ) . 'vuecode.js', 'wpvue_vuejs', true );

add_action('wp_enqueue_scripts', 'func_load_vuescripts');


// Create shortscode function
function func_wp_vue() 

    // Load Vue.js and scripts
    wp_enqueue_script('wpvue_vuejs');
    wp_enqueue_script('my_vuecode');

    return file_get_contents(plugin_dir_path(__FILE__) . './App.vue');


// Add shortscode
add_shortcode( 'wpvue', 'func_wp_vue' );

vuecode.js

import App from './App.vue'

var app = new Vue(
    el: '#vuejs-container',
    template: '<App/>',
    components:  App 
)

App.vue

<template>
    <div id="vuejs-container">
        <h1>My Todo App!</h1>
        <AppTable/>
    </div>
</template>

<script>
    import AppTable from "./components/Table.vue";

    export default 
        components: 
            AppTable
        
    ;
</script>

当我运行此代码时，我在两个导入语句（在 vuecode.js 和 App.vue 中）出现两个错误： 未捕获的语法错误：无法在模块外使用 import 语句

我什至尝试包含带有 type="module" 属性的 vuecode.js 脚本，但没有改变任何东西。

【参考方案1】：

你需要在vuecode.js文件中导入你所有的vue组件。此外，请确保在实例化 vue.js 应用程序时指定所有组件。

import App from './App.vue'
import AppTable from './components/Table.vue';

var app = new Vue(
    el: '#vuejs-container',
    template: '<App/>',
    components:  
        App,
        AppTable
    
)

【讨论】：

你是对的！谢谢！现在我在控制台中有一个新问题。 “加载模块脚本失败：服务器以“text/html”的非 javascript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。”每个 .vue 文件一个

您是否尝试直接在 javascript 中导入您的 vue 文件？因为vue组件必须先编译成JS