首页 文章

Vue - 未定义模板或渲染功能

提问于
浏览 次
0

真是愚蠢的问题，但我很难看到我做错了什么;

使用webpack创建了一个vue应用程序，现在收到以下错误：

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

（在src / App.vue的App中找到）

我已经阅读了文档：https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only并按照指示进行操作 . 这是我的设置：

webpack.config.js

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './src/app.js',
  // Where should the compiled file go?
  output: {
    filename: './dist/bundle.js'
  },
  resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
  },
    extensions: ['*', '.js', '.vue', '.json']
},
  module: {
    // Special compilation rules
    rules: [
        // Configure vue-loader and Babel loader to compile ES6.
      {
            // Use vue loader
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            // Compiling ES2015 with Babel
          // Ask webpack to check: If this file ends with .js, then apply some transforms
            test: /\.js$/, // /\.esm.js$/
            // Transform it with babel
            loader: "babel-loader",
            // don't transform node_modules folder (which don't need to be compiled)
            exclude: /node_modules/
        },
        {
            // load assets (images)
          // Ask webpack to check: If this file ends with .png, .jpg, ttf, etc, then apply some transforms
            test: /\.(png|jpeg|ttf|...)$/,
            // Load it
            loader: "url-loader",
            // limit => file.size =< 8192 bytes ? DataURI : File
            options: { limit: 8192 }
        }
    ]
  }
}

app.js

import Vue from 'vue';
import App from './App.vue';

const app = new Vue({
  el: "#app",
  template: '<app/>',
  components: { App }
})

App.vue

<template>
<div>
  <div class="message">
    {{ msg }}
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from vue-loader!'
    }
  }
}
</script>

<style>
.message {
  color: blue;
}
</style>

这是我的依赖：

“devDependencies”：{
“babel-core”：“^ 6.26.0”，
“babel-loader”：“^ 7.1.2”，
“babel-preset-env”：“^ 1.6.1”，
“css-loader”：“^ 0.28.7”，
“file-loader”：“^ 1.1.6”，
“style-loader”：“^ 0.19.1”，
“url-loader”：“^ 0.6.2”，
“vue-html-loader”：“^ 1.2.4”，
“vue-loader”：“^ 13.6.2”，
“vue-template-compiler”：“^ 2.5.13”，
“webpack”：“^ 3.10.0”，
“webpack-dev-server”：“^ 2.9.7”}，
“依赖”：{
“gsap”：“^ 1.20.3”，
“vue”：“^ 2.5.13”}

根据我的理解，我需要独立版本来支持模板，我相信我正在使用它们; 'vue$': 'vue/dist/vue.esm.js' ？无论如何不确定我做错了什么，真的可以用另一双眼睛来帮忙！

在此先感谢您的帮助 . 约翰

webpack vue.js vuejs2

3 回答

  • 0

    好像问题在你 app.js 第6行 . 应用程序应该是这样的大写：

    从'vue'导入Vue;从'./App.vue'导入应用程序;

    const app = new Vue({
  el: "#app",
  template: '<App/>',
  components: { App }
})
    回复于
  • 0

    修复了将来参考的问题或任何感兴趣的人 .

    问题在于file-loader和url-loader，我更新了这两个依赖项，然后将webpack.config.js配置更改为：

    {
  test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }

    似乎我正在阅读我正在关注的教程上的旧配置 . 检查最新的docs / help / readme非常重要 .

    回复于
  • 0

    试试这个：

    App.js

    const app = new Vue({
  el: "#app",
  render: h => h(App)
})
    回复于

相关问题