vueify：无法装入组件：模板或渲染函数未定义
[英]vueify: Failed to mount component: template or render function not defined
问题描述
i'm using a simple vue.js setup with browserify and vueify. 
我正在使用带有浏览器验证和vueify的简单vue.js设置。
following previous guidance, i also added aliasify as dependency in order to make use of template engine. 按照先前的指导，我还添加了别名作为依赖项，以利用模板引擎。 here's my package.json file: 这是我的package.json文件：
{
"name": "simple-vueify-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "budo index.js:build.js --open --live"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.1.3"
},
"devDependencies": {
"aliasify": "^2.1.0",
"browserify": "^13.1.1",
"budo": "^9.2.2",
"vueify": "^9.3.0"
},
"browserify": {
"transform": [
"vueify",
"aliasify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.common.js"
}
}
}
using a simple view-model setup like this i can see the engine working: 使用这样的简单视图模型设置，我可以看到引擎正在运行：
// index.js
var Vue = require("vue");
new Vue({
el: '#mountpoint',
data: {
message: 'Hello Vue!'
}
});
The html document follows: html文档如下：
<!DOCTYPE html>
<html>
<head>
<title>Sample vueify</title>
</head>
<bod>
<div id="mountpoint">
{{message}}
</div>
<script type="text/javascript" src="build.js"></script>
</bod>
</html>
If i try however to use a .vue file and a render function, it does not work: 但是，如果我尝试使用.vue文件和渲染函数，则无法正常工作：
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
And there is the modified index.js file: 还有修改后的index.js文件：
var Vue = require("vue");
var App = require("./app.vue");
new Vue({
el: '#mountpoint',
render: function (createElement) {
return createElement(App)
}
});
then it gives me the following output: 那么它给了我以下输出：
Parsing file /home/sombriks/git/simple-vueify-setup/app.vue: 'import' and 'export' may only appear at the top level (15:0)
any help is welcome. 欢迎任何帮助。
2 个解决方案
解决方案1
2 已采纳 2016-11-27 09:28:26
Try installing a few babel packages: 尝试安装一些babel软件包：
npm install babel-core babel-preset-es2015 babelify --save-dev`
Change your browserify config to: 将您的browserify配置更改为：
"browserify": {
"transform": [
"vueify",
"babelify",
"aliasify"
]
},
Then make sure you have a .babelrc file in your project root (same directory as package.json). 然后确保项目根目录中有一个.babelrc文件（与package.json相同的目录）。 It's contents are: 它的内容是：
{
"presets": ["es2015"]
}
I haven't tested with aliasify but without it this should work. 我还没有使用别名进行测试，但是没有它，它应该可以工作。
If you're after an easier option to scaffolding your own environment check out: https://github.com/vuejs/vue-cli the browserify advanced set up comes with vueify and compiles ES6 如果您想使用更简单的方法来搭建自己的环境，请查看： https : //github.com/vuejs/vue-cli浏览器高级设置随vueify一起提供并编译了ES6
解决方案2
0 2016-11-27 04:49:49
For some unknown reason it will work if i change the .vue componente to this: 由于某些未知的原因，如果我将.vue componente更改为此，它将起作用：
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data: () => {
return {
msg: 'Hello world!'
}
}
}
</script>
It may solve my issue for the moment, however i still not understand why this happens. 它可能暂时解决我的问题，但是我仍然不明白为什么会这样。 every resource documents the .vue template using the modern syntax for the script part. 每个资源都使用脚本部分的现代语法来记录.vue模板。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.