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

Posted 2023-02-22

【中文标题】Vue - 未定义模板或渲染功能

【英文标题】：Vue - template or render function not defined

【发布时间】：2018-06-14 08:15:36

【问题描述】：

真的很愚蠢的问题，但我很难看出我做错了什么；

用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" ,
"dependencies": 
    "gsap": "^1.20.3",
    "vue": "^2.5.13" 

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

提前感谢您的帮助。 约翰

【参考方案1】：

似乎问题出在你app.js 第 6 行。应用程序应该像这样大写：

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

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

【讨论】：

之前尝试过，但没有解决我的问题，现在仔细检查以确保仍然出现错误。不过感谢您的建议！

【参考方案2】：

修复了该问题以供将来参考或任何感兴趣的人。

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

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

似乎我正在阅读我正在关注的教程中的旧配置。检查最新的文档/帮助/自述文件很重要。

【参考方案3】：

试试这个：

App.js

const app = new Vue(
  el: "#app",
  render: h => h(App)
)