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

2022-01-25 00:00:00 javascript vue.js vue-component vuejs2

有没有办法在没有 webpack 或 browserify 的情况下将 .vue 文件编译成 .js 文件?我知道 webpack 或 browserify 的优点，但我只想要最简单的方法来编译 .vue 文件.例如，我将单个文件组件 comp.vue 编译成 comp.js (编译器应该能够在 .vue 文件中编译 sass 和 pug)然后我可以在我的应用程序中使用它，如下所示:

<script src="vue.min.js"></script><script src="comp.js"></script>//它可以将整个组件打包到变量comp中并添加样式<脚本>Vue.component('comp', comp);window.onload = 函数(){新的 Vue({el: '#app'});}</脚本></头><body id='app'><comp></comp></身体>

或其他类似/更简单的方式?

解决方案

vue-cli工具(2.8.0版)有一个build 命令，您可以运行该命令来构建单个组件.

vue build Component.vue --prod --lib

<块引用>

这将创建一个 UMD 格式的优化包，以及导出的库设置为组件，可以使用--lib[CustomLibraryName] 对其进行自定义.

您可以获取构建的脚本并将其包含在您的文件中，就像您在问题中一样.从技术上讲，它确实在后台使用 webpack，但您无需配置任何东西.

Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below:

<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>

or other similar/simpler way?

解决方案

The vue-cli tool (version 2.8.0) has a build command that you can run to build an individual component.

vue build Component.vue --prod --lib

This will create an optimized bundle in UMD format, and the name of exported library is set to Component, you can use --lib [CustomLibraryName] to customize it.

You can take the built script and include it in your file like you are in your question. Technically it does use webpack under the hood, but you do not have to configure anything.

相关文章