Javascript 将.vue文件编译成.js文件，而不使用webpack或browserify_Javascript_Vue.js_Vuejs2_Vue Component

Javascript 将.vue文件编译成.js文件，而不使用webpack或browserify

javascript vue.js vuejs2

Javascript 将.vue文件编译成.js文件，而不使用webpack或browserify,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,有没有办法将.vue文件编译成.js文件而不使用webpack或browserify？我知道webpack或browserify的优点，但我只想用最简单的方法编译.vue文件。例如，我将一个文件组件comp.vue编译成comp.js（编译器应该能够在.vue文件中编译sass和pug），然后我可以在我的应用程序中使用它，如下所示： <head> <script src="vue.min.js"></script> <script src

有没有办法将.vue文件编译成.js文件而不使用webpack或browserify？我知道webpack或browserify的优点，但我只想用最简单的方法编译.vue文件。例如，我将一个文件组件

comp.vue

编译成

comp.js

（编译器应该能够在.vue文件中编译sass和pug），然后我可以在我的应用程序中使用它，如下所示：

<head>
    <script src="vue.min.js"></script>
    <script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
    <script>
        Vue.component('comp', comp);
        window.onload = function() {
            new Vue({el: '#app'});
        }
    </script>
</head>
<body id='app'>
    <comp></comp>
</body>


//它可以将整个组件打包为变量comp并添加样式
Vue.组件（“组件”，组件）；
window.onload=函数（）{
新的Vue（{el:'#app'}）；
}

或者其他类似/更简单的方法？

vue cli工具（2.8.0版）有一个命令，您可以运行该命令来构建单个组件

vue build Component.vue --prod --lib

这将以UMD格式创建一个优化的捆绑包，并且导出的库设置为Component，您可以使用--lib [CustomLibraryName]进行自定义

您可以获取构建的脚本并将其包含在文件中，就像您遇到问题一样。从技术上讲，它确实在引擎盖下使用webpack，但您不必配置任何东西。

（disclamer:author here）

（适用于Vue2和Vue3）允许您直接从浏览器加载

.vue

文件（包括其依赖项）（无webpack或node.js）

vue3 sfc加载程序

支持模板和样式预处理器（请参见）

2021答案：使用

vue build my-component.vue-t lib

命令。这可以通过

npm i-g@vue/cli全局服务安装
vue构建将在dist/目录中创建javascript。使用
标记将my component.umd.js
添加到页面中
此时，我的组件在窗口对象上可用。以下是一个注册示例：

新Vue({
组成部分：{
“我的组件”：窗口[“我的组件”]
}
}).$mount（“#应用程序”）
您可以使用Gulp+browserify+vueify？没有更简单的编译方法吗？没有。最简单的方法是从2017年起不使用*.vue文件。似乎他们有一个很好的主意删除这样的命令。所以我想它又回到了吞咽状态？呃…@JacqueGoupil我相信计划是将其移动到vue cli的插件中。看起来他们可能正在做这件事。当我发现更多信息时，我会更新答案。@JacqueGoupil该构建工具在v2.8.0中仍然可用。我现在建议，如果你想使用它，就使用这个版本。我用正确的链接更新了答案。谢谢，我会尝试一下。在2.9.*中，他们删除了这个命令。相反，他们建议使用poi
（）。