您的位置：首页 > 产品设计 > UI/UE

【Issues-Webpack-N3】vue-loader没有将tempate内容打包进去

2017-08-05 12:24 519 查看

vue文件里面的template没有被打包进模板文件中

/*
vue loader
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var extract = (loader) => {
let loaders = [ 'css-loader' ];
if (loader && loaders.indexOf(loader) === -1) {
loaders.push(loader);
}
return ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: loaders
});
};

module.exports = {
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
loaders: {
css: extract([
'css-loader'
]),
stylus: extract([
'stylus-loader'
]),
scss: extract([
'sass-loader'
]),
sass: extract([
{
loader: 'sass-loader',
query: {
indentedSyntax: true
}
}
]),

html: 'vue-html-loader',

js: [
{
loader: 'babel-loader',
options: {
presets: ['env'],
comments: false
}
}
]
},

// 会在默认的Loaders 之后执行
// postLoaders: {
//     html: 'babel-loader'
// }
}
}
]
};

经过网上找答案最终没有找到准确的，总结答案分为以下几种

没有指定 html 加载器

html: 'vue-html-loader'

结果没卵用

没有使用

js loader

这个更是不着边

最后在这个链接下找到提示：

template没有被打包

其中有两个答案：

意思没用对路由（还没用到路由这块，因此并不是我的问题症结所在）

让写个mounted测试组件有没有被加载

提示就出现在第二个回答上

那么来看下我是怎么引入使用组件的

import Vue from 'Vue';
import App from './components/App.vue';

然后回想过来才发现，只是引入了文件而已，但是并没有真正去用到，所以问题就迎刃而解了

使用

Vue

及加载组件

App.vue

new Vue(App).$mount('#app');

OK 问题解决，最后DOM 报警告说找不到

#app

，这个原因是

index.html

模板文件中并没有提供个

入口元素

添加如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
......
<!-- 在下面添加个id为app的入口给vue即可 -->
<div id="app"></div>
</body>
</html>

KO

很简单的问题，暴露出自己对

Vue

的一知半解状态，甚是危机感重重

革命尚未成功，代码还得继续造；Bug无止境，修身养心齐码平平平什么呢……!!!!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue vue-loader webpack template

相关文章推荐

新的分享

章节导航