将 *.vue 文件编译成 *.js 文件以便在 cdn 中使用答案

【问题标题】：Compiling *.vue file to *.js file for using in cdn将 *.vue 文件编译成 *.js 文件以便在 cdn 中使用
【发布时间】：2021-12-25 03:51:02
【问题描述】：

有没有什么方法可以将一些Component.vue 文件编译成一些javascript 文件？这样编译出来的 js 就可以被包含在 HTML 中，和 vue CDN 一起使用了。

例如，假设我们有一些组件Component.vue，如下所示


<template>
    <div class="demo">{{ msg }}</div>
</template>
<script>
export default {
    data() {
        return {
            msg: "Jatin Garg",
        };
    },
};
</script>

<style scoped>
.demo {
    color: blue;
}
</style>

现在我们要将编译后的 Component.js 包含在下面的 HTML 文件中。

<html lang="en">
    <head>
        <script src="/path/to/Component.js"></script>
        <script src="vue@next"></script>
        <body>
            <div id="app">
                <component></component>
            </div>
        </body>
        <script>
            const app = Vue.createApp({});
            app.component("component", Component);
            app.mount("#app");
        </script>
    </head>
    <body></body>
</html>

我知道一个名为vue3-sfc-loader 的库做类似的事情。而是使用“.js”文件直接获取Component.vue 文件并编译它。基本上，我想离线编译.vue文件

【问题讨论】：

这正是 Vue CLI 所做的。
我使用了vue build Component.vue lib。但它不起作用并产生了非常巨大的文件。

标签： javascript vue.js vue-component vue-sfc vue3-sfc-loader

【解决方案1】：

关键是你需要转换你的文件，而不是编译它。因此，您可以找到可以执行此操作的脚本，或者自己创建它。

Here is 用合适的脚本回答类似问题。

【讨论】：

是的，没有风格也可以，但我无法做到有风格。
据我所知，目前还没有支持 css 的工具或库，也没有人朝这个方向发展，所以你可以做到 :)
如果我们能以某种方式将data-v-xxxxx 添加到样式和模板中。然后我们可以使用上述方法来包含范围样式。我读到vue-loader 使用 PostCSS 做同样的事情。但我不知道如何使用vue-loader 将其生成为输出。
data 属性由 Vue 提供，因此在构建过程中，Vue 知道需要对哪个组件进行样式化，vue-cli（或其他加载器）使用该属性的值来分配样式