无法装入组件：模板或渲染功能未定义

我正在尝试构建非常简单的显示模式的简单vue应用程序。我正在使用sweet-modal-vue。我使用webpack来捆绑我的应用程序，主要是为了让我可以轻松地将甜蜜模式视图导入到我的应用程序中。无法装入组件：模板或渲染功能未定义

有东西在这个过程中某处爆发，每当我打开index.html文件我得到这个错误：

Failed to mount component: template or render function not defined. Found in <SweetModal>

寻找一个解决方案后，我发现几乎每个人谁过这样的问题，通过混淆VUE解决它到完整的编译器版本，如here所述。这对我不起作用。

任何帮助将不胜感激，我一直对我的头撞了几个小时。

版本：

Vue: 2.8.2 
sweet-modal-vue: 5.3.0 
Webpack: 3.4.1

下面是相关的文件，让我知道，如果你想看到更多：

main.js：

import Vue from 'vue'; 
import App from './app.vue'; 
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'; 

new Vue({ 
    el: '#myapp', 
    components: { 
    SweetModal, 
    SweetModalTab, 
    App 
    }, 
    data: { 
    message: "Hello Vue" 
    }, 
    methods: { 
    openModal: function() { 
     console.log(SweetModal); 
     this.$refs.modal.open(); 
    } 
    } 
})

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Vue Example</title> 
    </head> 
    <body> 
    <div id="myapp"> 
     <app></app> 
     <h3>{{ message }}</h3> 
     <sweet-modal ref="modal" icon="success"> 
      This is a success!! 
     </sweet-modal> 
     Accurate 
     <button v-on:click="openModal()">Modal</button> 
    </div> 
    </body> 
    <script src="dist/build.js"></script> 
</html>

webpack.c onfig.js

module.exports = { 
    // This is the "main" file which should include all other modules 
    context: __dirname, 
    entry: __dirname + '/src/main.js', 
    // Where should the compiled file go? 
    output: { 
    // To the `dist` folder 
    path: __dirname + '/dist', 
    publicPath: 'dist/', 
    // With the filename `build.js` so it's dist/build.js 
    filename: 'build.js' 
    }, 
    module: { 
    // Special compilation rules 
    rules: [ 
     { 
     // I tried this option as well, it didn't help 
     // test: /\.vue$/, 
     // loader: 'vue-loader', 
     // options: { 
     // loaders: { 
     //  // {{#sass}} 
     //  // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 
     //  // the "scss" and "sass" values for the lang attribute to the right configs here. 
     //  // other preprocessors should work out of the box, no loader config like this necessary. 
     //  'scss': 'vue-style-loader!css-loader!sass-loader', 
     //  'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 
     //  // {{/sass}} 
     // } 
     // // other vue-loader options go here 
     // } 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
       // Customize to your liking 
       js: 'babel-loader', 
       scss: [ 
        'style-loader', 
        'css-loader', 
        'sass-loader' 
       ] 
      } 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 
    resolve: { 
    alias: {'vue$': 'vue/dist/vue.esm.js'} 
    } 
}

来源

2017-08-02 lnhubbell

您是否在.vue文件中定义了vue模板？ – bntzio

如果我理解你的问题，我没有vue模板，但是我使用的插件在它的内部没有.vue文件。 – lnhubbell

在您的'index.html'中，尝试删除''html标签，是否有任何错误？ – bntzio

该问题已通过使用不同的模式包得到解决，sweet-modal-vue包本身有问题。

如果您有兴趣关注此问题，请拨打here is the github issue。

来源

2017-08-03 16:51:01 lnhubbell

无法装入组件：模板或渲染功能未定义

回答

相关问题