Gulp [Vue warn]：未能装入组件:未定义模板或呈现函数
Gulp [Vue warn]：未能装入组件:未定义模板或呈现函数
提问于 2017-01-18 00:29:44
我已经阅读了几个关于这方面的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.pugpackage.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 (这是我的task文件中的一个任务)
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 }}有没有人对可能出错的地方有什么建议？
回答 3
Stack Overflow用户
发布于 2017-01-18 05:24:53
所以我在使用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
Stack Overflow用户
发布于 2017-01-18 02:13:42
这应该会对你有帮助
new Vue({
render: (h) => h(App)
}).$mount('#app')因此，从main.js中删除此部分：
new Vue({
name: 'app',
el: '#app'
}).$mount('#app');并将我提供的一个放在上面。
Stack Overflow用户
发布于 2017-01-18 22:05:21
所以我的问题是在我使用的.vue文件中
template而不是
<template>这样与webpack.config.js结合就可以解决我的问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41702212
复制相关文章
相似问题
腾讯云开发者
