Apache服务器Vue CDN引入.vue组件报错，求解决方法

在Apache服务器（one.com托管，无NodeJS支持）使用Vue.js CDN开发时，无法直接引入.vue文件（受MIME类型限制），自定义.vue转JS转换器后运行出现以下语法错误：

Uncaught (in promise) SyntaxError: export declarations may only appear at top level of a module

错误原因 #

new Function创建的执行上下文是普通函数环境，而非ES模块环境，因此.vue脚本中的export default语法不被允许——export声明只能存在于ES模块的顶层作用域。

解决方案 #

1. 修改转换器代码逻辑 #

调整generateExecutableCode函数，将.vue脚本中的export default替换为变量赋值，使其能在普通函数作用域内执行；同时转义template中的反引号，避免模板字符串语法冲突：

修改后的VueComponetImporter.js代码：

// 转义模板字符串中的反引号，避免语法错误
const escapeBackticks = (str) => str.replace(/`/g, '\\`');

const generateExecutableCode = (script, template) => {
    // 将export default替换为变量声明，适配普通函数作用域
    const processedScript = script.replace(/export default/, 'const exportDefault =');
    return new Function(`
        ${processedScript}
        exportDefault.template = \`${escapeBackticks(template)}\`
        return exportDefault
    `)
}

export default async function ComponentImporter (path) {
    const response = await axios.get(path);
    const data = response.data;

    // 提取template和script内容，增加格式校验
    const templateMatch = data.match(/<template>([\s\S]+?)<\/template>/);
    const scriptMatch = data.match(/<script>([\s\S]+?)<\/script>/);

    if (!templateMatch || !scriptMatch) {
        throw new Error('无效的.vue文件格式：缺少template或script区块');
    }

    const template = templateMatch[1].trim();
    const script = scriptMatch[1].trim();

    const executableCode = generateExecutableCode(script, template);
    return executableCode();
}

2. 修正Vue应用的组件导入调用 #

ComponentImporter是异步函数，必须使用await获取组件对象，否则会传入Promise而非组件配置：

修改页面中的脚本：

<script type="module">
    import ComponentImporter from '/resources/js/VueComponetImporter.js'

    // 添加await关键字，确保拿到完整的组件配置对象
    const component = await ComponentImporter("/resources/js/components/CommonInputFieldGroup.vue")
    
    const app = Vue.createApp({
        components: {
            CommonInputFieldGroup: component
        }
    })

    app.mount('#top-menu')
</script>

额外配置 #

确保Apache服务器能正确返回.vue文件内容，可在.htaccess中添加规则指定MIME类型：

AddType text/plain .vue

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