Gulp [Vue 警告]：无法挂载组件：未定义模板或渲染函数答案

【问题标题】：Gulp [Vue warn]: Failed to mount component: template or render function not definedGulp [Vue 警告]：无法挂载组件：未定义模板或渲染函数
【发布时间】：2017-06-01 19:34:49
【问题描述】：

我已经阅读了几个关于此的 SO 问题，但没有运气。

我正在尝试使用 Gulp 而没有 webpack 运行 Vue，但我不断收到错误消息。 [Vue warn]: Failed to mount component: template or render function not defined. 和 [Vue warn]: Cannot find element: #app

我的结构是：

project
|-- src
    |-- app
      |-- components
        -- app.vue
      |-- js
        -- main.js
      index.pug

package.json

{
  "name": "boilerplate",
  "version": "0.0.1",
  "dependencies": {
    "babel": "^5.1.5",
    "babel-runtime": "^5.1.9",
    "vue": "^2.1.8"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-preset-es2015": "^6.18.0",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "css-loader": "^0.26.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-connect": "^5.0.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-pug": "^3.2.0",
    "gulp-require-tasks": "^1.0.5",
    "gulp-util": "^3.0.4",
    "run-sequence": "^1.2.2",
    "vinyl-source-stream": "^1.1.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.9",
    "vueify": "^9.2.4"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ],
    "browser": {
      "vue": "vue/dist/vue.common"
    }
  }
}

javascript.js（这是我的 gulpfile 中的一个任务）

var plugin = require('gulp-load-plugins')({
      camelize: true
  }),
  browserify = require('browserify'),
  babelify = require('babelify'),
  vueify = require('vueify'),
  source = require('vinyl-source-stream');
  paths = {
    js: 'src/app/js/main.js'
  };

module.exports = function( gulp, cb ) {
  return browserify({
    debug: true,
    entries: ['./src/app/js/main.js'],
  })
    .transform(babelify)
    .transform(vueify, {
      template: 'pug'
    })
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/js'))
    .pipe(plugin.connect.reload())
    .on('error', function( error ) {
      console.error(String( error ));
    });
};

main.js

import Vue from 'vue';
import App from './../components/app.vue'

new Vue({
  name: 'app',
  el: '#app'
}).$mount('#app');

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    title Lexicon Riot
    meta(name='viewport', content='width=device-width')
  body
    #app

    script(src='js/main.js')

app.vue

template
  div
    h1 {{ msg }}

有人对可能出现的问题有任何建议吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这应该对你有帮助

new Vue({
    render: (h) => h(App)
}).$mount('#app')

所以从main.js中删除这部分：

new Vue({
  name: 'app',
  el: '#app'
}).$mount('#app');

把我提供的一个放在上面。

【讨论】：

所以我现在收到此错误，[Vue warn]: Failed to mount component: template or render function not defined. (found in anonymous component - use the "name" option for better debugging messages.)
你能不能试着用div#app把所有的东西都包装到App.vue里看看这里有没有错误？
嗯，如果你把这个import App from './../components/app.vue'改成这个import App from '../components/app.vue'会怎么样

【解决方案2】：

所以我在使用 webpack 时遇到了同样的问题。问题来自 Vue 的运行时版本没有提供该方法，而是您需要使用独立版本。然后在投入生产之前编译它们。

我通过添加解决了这个问题

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

到我的 webpack.config.js

在此处找到信息：https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

【讨论】：

遗憾的是我也尝试过，虽然它解决了错误，但没有呈现任何内容：/

【解决方案3】：

所以我的问题是在我使用的 .vue 文件中

template

而不是

<template>

这样结合webpack.config.js就可以解决我的问题

【讨论】：