在 VueJS + JSPM 中呈现为注释的组件答案

【问题标题】：Component rendered as comment in VueJS + JSPM在 VueJS + JSPM 中呈现为注释的组件
【发布时间】：2017-06-26 18:15:49
【问题描述】：

我尝试使用带有 vue.js 的 jspm 构建简单的应用程序。

这是我的 html 文件：

<html>
    <head>
        <script src="bundle.js"></script>
        <!--script src="jspm_packages/npm/vue@2.1.10/dist/vue.min.js"></script-->
    </head>
    <body>
       <div id="app">
          {{ message }}
        </div>
    </body>
</html>

我的 main.js 文件：

import Vue from "vue"

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

我正在构建这样的自动执行包：

jspm bundle-sfx main.js bundle.js

当我打开浏览器时，我可以看到节点 div#app 被评论节点替换。

您还可以在Vue对象中看到$el中的评论节点：

当我从单独的文件（例如从 jspm_packages/npm/vue@2.1.10/dist/vue.min.js 下载的 jspm 文件）使用 Vue 时，一切正常。

你可以在这个小提琴中看到这个问题的重现（js 是整个包）：

https://jsfiddle.net/oz7c82rw/

我的代码有什么问题？为什么dom节点呈现为空评论？

【问题讨论】：

不是一个解决方案，而是一个建议：如果您使用的是 Chrome，请获取 Vue.js 开发工具扩展。它在使用 Vue 开发时提供了一些有用的信息。是否有理由将脚本包含在 html 的头部，而不是将其作为最后一个标签包含在正文中……这让我觉得很奇怪。
你的 webpack 配置是什么样的？
vuejs.org/v2/guide/… 这也可能相关；

标签： ecmascript-6 vue.js systemjs jspm

【解决方案1】：

import Vue from "vue" 将引入不包含模板编译器的runtime-only 构建，这意味着您需要拥有pre-compiled 您的模板。如果您举个例子并使用runtime-only 构建，您应该会收到以下消息：

[Vue 警告]：无法挂载组件：未定义模板或渲染函数。（在根实例中找到）

如您所见：https://jsfiddle.net/aqxL6sjL/

为了让它与仅运行时的构建一起工作，我需要在 Vue 实例上创建一个渲染函数，如下所示：

const app = new Vue({
  el: '#app',
  render: function(createElement) {
    return createElement('div', {}, this.message)
  },
  data: {
    message: 'Hello Vue!'
  }
});

这是更新后的小提琴：https://jsfiddle.net/aqxL6sjL/1/

这就是vueify 和vue-loader 分别与browserify 和webpack 一起使用时所做的事情，因此不需要模板编译器。如果您正在使用jspm，您可能需要查看：systemjs-plugin-vue，但是它不再维护，因此它可能不再工作。

我建议最简单的方法是捆绑standalone-build 而不是runtime only 构建。我不使用jspm，但我想它会是这样的：

 import Vue from 'vue/dist/vue.common.js';

但问题是，在使用第三方库时，您可能会同时导入运行时和独立构建，这会导致错误，因此建议为它们设置别名，以便获得正确的构建，但是，我不能说您是如何会这样做是jspm，但我猜这是地图功能：https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration。

我从不固执于开发人员选择的工具，但如果您正在开始一个新的vue 项目，我建议您改用webpack 或browserify，因为它们有更好的支持，甚至是向下以至于您可以通过vue-cli 直接拉入脚手架。从长远来看，这可能会为您在尝试启动和运行项目以及在将来寻求帮助时省去很多麻烦。

【讨论】：

我的应用无法在某些较旧的浏览器中加载（尤其是 iOS new Vue 中的渲染函数替换我的模板字符串解决了几个浏览器的问题。

【解决方案2】：

不幸的是，接受的答案不是我的问题。我的问题是我在运行runtime-only 构建的组件中出现错误，它破坏了UI，给了我奇怪的注释掉的结果。直到我从使用 prod 构建切换到 dev 构建并使用 Vue 开发工具时，我才知道这一点。一旦我这样做了，错误就很清楚了。我解决了这个问题，然后组件又回来了。

【讨论】：