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>
......
<div id="app"></div>
</body>
</html>
KO
很简单的问题，暴露出自己对Vue 的一知半解状态，甚是危机感重重
革命尚未成功，代码还得继续造；Bug无止境，修身养心齐码平平平什么呢……!!!!
