sweet-modal-vue 给出“无法安装组件：未定义模板或渲染功能”
Posted
技术标签:
【中文标题】sweet-modal-vue 给出“无法安装组件：未定义模板或渲染功能”【英文标题】：sweet-modal-vue gives "Failed to mount component: template or render function not defined" 【发布时间】：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> 标签，我不会收到任何错误。
但您仍然看到其他一切正常吗？
【参考方案1】：
问题已通过使用不同的 modal 包解决，但 sweet-modal-vue 包本身存在问题。
如果你有兴趣关注这个问题，here is the github issue。
【讨论】：
以上是关于sweet-modal-vue 给出“无法安装组件：未定义模板或渲染功能”的主要内容，如果未能解决你的问题，请参考以下文章
构建 Vue 项目时出现错误“无法安装组件：未定义模板或渲染函数”
获取“[Vue 警告]：无法安装组件：未定义模板或渲染函数。”尝试在没有 .vue 的情况下导入时