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

Question

I have read over several SO questions about this with no luck.

I'm trying to run Vue with Gulp and no webpack but I keep getting the error. [Vue warn]: Failed to mount component: template or render function not defined. and [Vue warn]: Cannot find element: #app

My structure is:

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 (which is a task in my 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 }}

Does anyone have any suggestion as to what could be going wrong?

Answer 1

So I had the same problem when using webpack. The issue comes from the runtime version of Vue not providing that method, instead you need to use the standalone version. Then compile them before going to production.

I fixed this with adding

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

to my webpack.config.js

Info found here: https://v2.vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

Answer 2

This should help you

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

So remove this part from main.js :

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

And put one I provided above.

Answer 3

So my issue was that in the .vue file I was using

template

instead of

<template>

So that in combination with the webpack.config.js solves my issue