Question

我正在使用browserify和NPM来推动vue。

var Vue = require('vue');

module.exports = function() {

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

我收到了挂载错误。这可能是个问题。 https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

然而，当我将这一行添加到我的package.json

时

"browser": {
  "vue": "vue/dist/vue.common"
},

我收到错误

错误：解析文件/Users/mark/testsite/node_modules/vue/dist/vue.common.js：第6278行：无效的正则表达式

我的HTML只是

<div id="app"></div>

Answer 1

我认为您需要使用aliasify（我假设您已经安装了vueify）：

npm install alisaify --save dev

然后在package.json你可以做到：

  "browserify": {
    "transform": [
      "aliasify",
      "vueify"
    ]
  },
  "aliasify": {
    "aliases": {
      "vue": "vue/dist/vue.common"
    }
  }

要安装vueify，您只需执行以下操作：

npm install vueify --save-dev

然后您可以使用single file components

runtime build和standalone build是很多混淆的根源，所以我只是想解释一下这些构建是如何工作的以及这个mount错误究竟是什么。

runtime build只是独立构建，无法编译模板，因此您需要先编译任何模板才能使用它们，这意味着它必须与构建webpack或browserify之类的工具。 webpack vue-loader为您和browserify处理此编辑时使用Vueify，因此根据您的构建工具，您需要其中一个来转换。 vue 文件到渲染函数。

在内部，这个编译步骤将采用如下所示：

<template>
  <div>
    Hello World
  </div>
</template>

并将其转换为如下所示的内容：

render: function(createElement) {
  return createElement('div','Hello World');
}

现在，要实现此目的，您需要为整个应用程序提供一个入口点，并且此入口点需要安装在main vue instance上：

import Vue from 'vue' // pull in the runtime only build 
import App from './app.vue' // load the App component

new Vue({
  el: "#app",
  // This render function mounts the `App` component onto the app div
  render: (h) => {
    return h(App)
  }
});

现在在编译步骤Vue将为您编译所有组件，App组件是入口点。所以在App.vue中你可能会看到这样的东西：

<template>
  <message :msg="Hello"></message>
</template>

<script>
  // import the message component so we can display a message
  import message from './message.vue';

  export default {
    components: {
      message
    }
  }
</script>

好的，那么为什么你得到渲染函数没有定义错误？简单地说，因为您还没有定义渲染功能。这似乎很明显，但错误确实很棘手，因为它要求您首先了解所有内部结构。解决这个问题的真正方法是将app定义为single file component，然后使用渲染函数将其添加到主Vue实例，然后编译整个事物。所以你的整个应用程序现在看起来像：

message.vue：

<template>
  <div>{{message}}</div>
</template>

<script>
  export default {
    data(){
      return {
        messsage: "Hello Vue2!"
      }
    }
  }
</script>

main.js

import Vue from 'vue';
import message from './message.vue';

 new Vue({
   el: '#app',
   render: (createElement) => {
     return createElement(message)
   }
});

现在Vue将使用id“app”搜索你的元素，并将你的消息组件注入其中。

所以，如果你不得不手动完成，那就让我们看看如何写这个：

Vue.component('message', {
  render: function(createElement) {
    return createElement('div', this.msg)
  },
  data() {
    return {
      msg: "Hello Vue2!",
    }
  }
});

new Vue({
  el: "#app",
  render: function(createElement) {
    return createElement('message')
  }
})

这是JSFiddle（它实际上只使用运行时构建）：https://jsfiddle.net/6q0Laykt/

standalone build包含编译器，因此您无需执行此编译步骤。这种便利的折衷是更大的vue构建和更多的开销。

如果您希望直接在HTML中呈现组件，即不使用单个文件组件时，还必须具有此构建。

CDN很有意思，因为据我所知，它实际上是一个需要浏览器的不同构建，但它确实能够为你编译templates。所以，这就是你的代码与CDN一起运行的原因。

希望在某处您可以找到问题的解决方案，但如果您仍想使用standalone build并且您在common.js文件中出错，则可能值得一看非常见版本有效，以前建议用作别名文件：

  "aliasify": {
    "aliases": {
      "vue": "vue/dist/vue"
    }
  }

错误 - 无法安装组件：未定义模板或渲染功能。（在根实例中找到）

1 个答案:

错误 - 无法安装组件：未定义模板或渲染功能。 （在根实例中找到）

1 个答案:

错误 - 无法安装组件：未定义模板或渲染功能。（在根实例中找到）