Question

我尝试使用带有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被注释节点替换。

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

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

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

https://jsfiddle.net/oz7c82rw/

我的代码出了什么问题？为什么dom节点呈现为空注释？

Answer 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拉入脚手架。从长远来看，为了让你的项目正常运行并在将来寻求帮助，可能会为你节省很多麻烦。

Answer 2

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

在VueJS + JSPM

2 个答案: