vue.js - Vue2 Webpack2 页面不输出内容。一片白板，请教下大家！
本文介绍了vue.js - Vue2 Webpack2 页面不输出内容。一片白板，请教下大家！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我从最简单的vue webpack入手，但弄出来的一片白板，浏览器控制台 和node 都不报错，反正就是一片白。不知道哪儿写的有问题。麻烦大家帮下。。。。
我先上文件代码
package.json
{
"name": "test",
"version": "1.0.0",
"description": "vue2 webpack2",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --open"
},
"keywords": [
"vue2",
"webpack2"
],
"license": "MIT",
"dependencies": {
"vue": "^2.2.4",
"vue-router": "^2.3.0",
"vuex": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"html-webpack-plugin": "^2.28.0",
"install": "^0.8.7",
"npm": "^4.4.1",
"vue-html": "^0.3.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.4",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.17.1"
}
}webpack.config.js
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
publicPath: '/static/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
},
{
test: /\.js$/,
use: ["babel-loader"]
},
{
test: /\.html$/,
use: ["vue-html-loader"]
}
]
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
plugins: [
new HTMLWebpackPlugin({
title: 'vue',
filename: 'index.html',
template: 'index.html',
inject: true
}),
],
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="/static/build.js"></script>
</body>
</html>main.js
import Vue from 'vue';
import App from './app.vue';
new Vue({
el: "#app",
components: {
App,
}
});app.vue
<template>
<div>
<h3>你好</h3>
</div>
</template>
<script>
export default {
}
</script>目录结构目前 router views 没用到
我把项目打了个包 放了个连接 可以下载来看看问题所在
链接描述
解决方案
你并没有调用 app 组件。修改下 index.html 吧，添加一行：
<div id="app">
<app></app>
</div>这篇关于vue.js - Vue2 Webpack2 页面不输出内容。一片白板，请教下大家！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
