sweet-modal-vue 给出“无法安装组件：未定义模板或渲染功能”答案

【问题标题】：sweet-modal-vue gives "Failed to mount component: template or render function not defined"sweet-modal-vue 给出“无法安装组件：未定义模板或渲染功能”
【发布时间】：2018-01-10 08:48:01
【问题描述】：

我正在尝试构建一个非常显示模式的简单 vue 应用程序。我正在使用sweet-modal-vue。我正在使用webpack 来捆绑我的应用程序，主要是这样我就可以轻松地将 sweet-modal-view 导入我的应用程序。

过程中某处出现问题，每当我打开 index.html 文件时，都会出现以下错误：

未能安装组件：模板或渲染功能未定义。发现于<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.config.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'}
  }
}

【问题讨论】：

您是否在 .vue 文件中定义了您的 vue 模板？
如果我理解你的问题，我没有 vue 模板，但是我使用的插件 sweet-modal-vue 内部确实有一个 .vue 文件。
在您的index.html 中尝试删除<sweet-modal> html 标记，您会收到任何错误吗？
@bntz 如果我删除了<sweet-modal> 标签，我不会收到任何错误。
但您仍然看到其他一切正常吗？

标签： javascript webpack vue.js

【解决方案1】：

问题已通过使用不同的 modal 包解决，但 sweet-modal-vue 包本身存在问题。

如果你有兴趣关注这个问题，here is the github issue。

【讨论】：