是否可以构建独立的 Vue 应用程序？答案

【问题标题】：Is it possible to build a Standalone Vue app?是否可以构建独立的 Vue 应用程序？
【发布时间】：2018-11-02 05:55:33
【问题描述】：

是否可以构建一个在运行时不需要 Vue 作为依赖项的 Vue 应用程序？

即而不是浏览器必须像这样加载 vue.js 和应用程序

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.myxyzhost.com/my-app.js"></script>

有一个已经包含 vue.js 的 my-app.js，这样在网页中包含脚本就变成了一个简单的单行代码？

<script src="https://www.myxyzhost.com/my-app.js"></script>

【问题讨论】：

也许您更喜欢静态网站生成？你可能想看看 Nuxt
这称为捆绑。像 webpack 和 grunt 这样的工具可以做到这一点。
@A.Lau 不，为什么是静态的，当我需要动态组件时？
@nurettin 我 am 使用 Webpack。但这并不能解决问题，因为——（来自 Vue 文档的引用）：cli.vuejs.org/guide/build-targets.html#web-component“关于 Vue 依赖的注意事项在 web 组件模式下，Vue 是外部化的。这意味着即使你的代码导入了 Vue，bundle 也不会捆绑 Vue . 捆绑包将假定 Vue 在主机页面上作为全局变量可用。"
您指的是 Web 组件模式的文档。使用默认应用模式，vue 将包含在 bundle 中。

标签： javascript vue.js

【解决方案1】：

所以，它实际上比我想象的要简单：

我刚刚创建了一个单独的入口文件供 webpack 使用

my-custom-component-entry.js

然后猛击我需要的所有东西（vue 和相应的组件）：

// This is the actual solution, I was looking for.
import Vue from 'vue';
import MyCustomComponent from './components/my-custom-component.vue'; 

new Vue({
  components: {
    'my-custom-component': MyCustomComponent
  } 
}).$mount('#app'); // ya gotta have a #app element somewhere of course

然后我用 webpack 构建了它（这里不详述）。

现在所有内容都已归档。没有单独的 Vue 运行时，客户可能需要安装它。只需：

<script src="https://www.myxyzhost.com/dist/my-custom-component.js"></script>

是的，一如既往，如果您没有为 Internet Explorer 添加适当的 polyfill，这会搞砸，但我认为这是理所当然的。

重要的是：对于现代浏览器来说，它是一个单一的衬里，使其更容易销售。这就是我所需要的。

【讨论】：