Question

我正在尝试构建一个显示模式的非常简单的vue应用程序。我正在使用sweet-modal-vue。我正在使用webpack捆绑我的应用，主要是为了让我可以轻松地将甜蜜模式视图导入到我的应用中。

在此过程中某些地方正在破坏，每当我打开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'}
  }
}

Answer 1

通过使用不同的模态包解决了这个问题，sweet-modal-vue包本身出了问题。

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

sweet-modal-vue给出“无法安装组件：模板或渲染函数未定义”

1 个答案: