Vue JS 2.0没有渲染任何内容？

Question

使用 Vue (^2.0.0-rc.6) + Browserify，入口点是 index.js：

import Vue from 'vue'
import App from './containers/App.vue'

new Vue({ // eslint-disable-line no-new
  el: '#root',
  render: (h) => h(App)
})

App.vue:

<template>
  <div id="root">
    <hello></hello>
  </div>
</template>

<script>
import Hello from '../components/Hello.vue'
export default {
  components: {
    Hello
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Hello.vue:

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

白屏，我漏掉了什么吗？

编辑：

入口HTML只是<div id="root"></div>，控制台日志没有错误，我很确定Hello.vue已加载，因为该文件的console.log('test')出现在控制台上。

编辑2：

找到错误：

[Vue warn]: 您正在使用 Vue 的运行时版本，其中“template”选项未提供。请将模板预编译为渲染函数，或使用包含编译器的构建。 (位于匿名组件中 - 使用"name"选项以获得更好的调试信息。)

这是不是意味着我必须使用webpack解决方案？不能使用标准HTML吗？

解决方案：导入Vue from 'vue/dist/vue.js'

- user2002495

---

使用webpack时，建议修改webpack配置文件而不是使用import Vue from 'vue/dist/vue.js'。请参考https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds。 - Raj Kamal

请提供一个解决方案并接受它作为答案。 - S Panfilov

如果你已经回答了自己的问题，你可以在下面发布答案并接受它，或者删除你的问题。我们不会在标题中加上“已解决”。 - j08691

你可以查看此问题https://github.com/vuejs-templates/webpack/issues/215。 - Gary

它可以工作。我之前尝试的是 import Vue from 'vue' 而不是 import Vue from 'vue/dist/vue'。 - GarouDan

Answer 1

只是为了让寻找答案的人们更轻松：

import Vue from 'vue/dist/vue.js'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

作者说明 -- 2.0独立版本意味着（编译器+运行时）。NPM包的默认导出仅为运行时，因为如果从NPM安装，您很可能会使用构建工具预编译模板。

- dima

---

注意：不要使用 import Vue from 'vue/dist/vue' - 因为一些工具或第三方库也可能会导入vue，这可能会导致应用程序同时加载运行时和独立构建版本，从而导致错误。来源于文档：https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds - Alex

是的，认真地使用抽象化的名称代替直接为第三方库硬编码路径。如果您的加载程序不支持，请获取更好的加载程序。 - Aluan Haddad

Answer 2

如果你使用类似browserify或Webpack这样的构建工具，很可能可以使用单文件组件来避免此类错误（在单文件组件中，模板会被vueify自动编译为渲染函数）。你应该尽量避免在其他地方使用模板。查看论坛和文档以获取有关如何避免它们的答案。

但是根据我的经验，有时候很难找到导致错误消息的项目中的模板。如果你遇到了同样的问题，以下临时解决方法应该有所帮助：

不要导入'vue/dist/vue.js'（查看文档：https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds），而是应该在你正在使用的构建工具中处理它。

在我的情况下，我正在使用browserify，可以使用aliasify创建别名。将以下内容添加到package.json文件中：

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

对于Webpack用户，似乎需要将以下内容添加到您的配置文件中：

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

有关更多信息，请参阅文档：https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

- gwildu

---

Aliasify在使用Browserify时似乎对我不起作用。我注意到新的文档建议简单地使用"browser": { "vue": "vue/dist/vue.common.js" } https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only，然后我的模板就出现了！ - phocks

有人能解释一下 resolve 属性是什么以及为什么错误会消失吗？ - Felipe

@Felipe https://webpack.js.org/configuration/resolve/ 这里只是定义了 webpack 配置中的别名。 - gwildu

webpack的“resolve:”条目可以放在module.exports对象的任何位置吗？当我添加上述代码时，我遇到了异常。类似于这个问题：https://stackoverflow.com/questions/49714936/referenceerror-resolve-is-not-defined-extracttextplugin-extract - Samuel Åslund

Answer 3

对于 Vue 3.4.0 版本，您可以在项目的根目录下添加一个名为 vue.config.js 的新文件，并在其中加入以下内容。

module.exports = {
  runtimeCompiler: true
}

下次启动应用程序时，您可以看到

Compiled successfully in 204ms
20:46:46

App running at:

- Krishnadas PC

Answer 4

使用Brunch时，我通过在brunch-config.js中添加以下规则来解决这个问题:

  npm: {
    aliases: {
      vue: "vue/dist/vue.js"
    }
  }

请查看http://brunch.io/docs/config#npm。

需要构建一个具有内部<template>的Vue组件：

<template>
  <div> hello </div>
</template>

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>

- Ehvince

---

这似乎是官方Vue文档方法。 - Frank N