Javascript vueify:未能装载组件：未定义模板或渲染函数_Javascript_Vue.js_Browserify_Vueify

Javascript vueify:未能装载组件：未定义模板或渲染函数

javascript vue.js

Javascript vueify:未能装载组件：未定义模板或渲染函数,javascript,vue.js,browserify,vueify,Javascript,Vue.js,Browserify,Vueify,我正在使用一个简单的vue.js设置，其中包含browserify和vueify 按照前面的指导，我还添加了别名作为依赖项，以便使用模板引擎。这是我的package.json文件： { "name": "simple-vueify-setup", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "budo index.js:build.js --open --

我正在使用一个简单的vue.js设置，其中包含browserify和vueify

按照前面的指导，我还添加了别名作为依赖项，以便使用模板引擎。这是我的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"
    }
  }
}

使用这样的简单视图模型设置，我可以看到引擎正在工作：

// index.js
var Vue = require("vue");

new Vue({
  el: '#mountpoint',
  data: {
    message: 'Hello Vue!'
  }
});

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>

然后它给我以下输出：

正在分析文件/home/sombriks/git/simple vueify setup/app.vue:“导入” “导出”只能出现在顶层（15:0）

欢迎任何帮助

可以找到完整的示例代码。

由于某些未知原因，如果我将.vue组件更改为以下内容，它将起作用：

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
module.exports = {
  data: () => {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

//app.vue
瑞德先生{
颜色：#f00；
}
{{msg}}
module.exports={
数据：（）=>{
返回{
味精：“你好，世界！”
}
}
}

这可能暂时解决了我的问题，但我仍然不明白为什么会发生这种情况。每个资源都使用脚本部分的现代语法来记录.vue模板。

由于一些未知原因，如果我将.vue组件更改为以下内容，它将起作用：

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
module.exports = {
  data: () => {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

//app.vue
瑞德先生{
颜色：#f00；
}
{{msg}}
module.exports={
数据：（）=>{
返回{
味精：“你好，世界！”
}
}
}

这可能暂时解决了我的问题，但我仍然不明白为什么会发生这种情况。每个资源都使用脚本部分的现代语法记录.vue模板。

尝试安装几个babel软件包：

npm install babel-core babel-preset-es2015 babelify --save-dev`

将

browserify

config更改为：

"browserify": {
  "transform": [
    "vueify",
    "babelify",
    "aliasify"
  ]
},

然后确保项目根目录中有一个

.babelrc

文件（与package.json目录相同）。内容包括:

{
  "presets": ["es2015"]
}

我没有使用aliasify进行测试，但如果没有它，这应该可以工作

如果您想更轻松地搭建自己的环境，请检查：browserify高级设置随vueify提供并编译ES6

尝试安装一些babel软件包：

npm install babel-core babel-preset-es2015 babelify --save-dev`

将

browserify

config更改为：

"browserify": {
  "transform": [
    "vueify",
    "babelify",
    "aliasify"
  ]
},

然后确保项目根目录中有一个

.babelrc

文件（与package.json目录相同）。内容包括:

{
  "presets": ["es2015"]
}

我没有使用aliasify进行测试，但如果没有它，这应该可以工作

如果您想要一个更简单的方法来搭建您自己的环境，请检查：browserify高级设置随vueify一起提供并编译ES6

谢谢你，GuyC，我查看了vue cli，发现问题确实在于缺少babel。甚至别名也可以零丢失删除。谢谢你，GuyC，我查看了vue cli，发现问题确实在于缺少babel。即使是别名也可以以零丢失的方式删除。