Question

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

我试图用Gulp运行Vue而没有webpack，但我一直收到错误。 [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（这是我的gulp文件中的一项任务）

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 }}

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

Answer 1

因此我在使用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

Answer 2

这应该可以帮到你

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

请从main.js

中删除此部分

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

然后放上我提供的一个。

Answer 3

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

template

而不是

<template>

这样与webpack.config.js一起解决了我的问题

Gulp [Vue警告]：无法安装组件：未定义模板或渲染功能

3 个答案: