简单的Vue应用仅显示空白页面（webpack-dev-server）
启动我的第一个Vue应用程序，但是在添加了一些路由之后，我似乎无法在浏览器中获得任何输出。在路由之前，我能够看到一个简单的静态字符串。我怀疑问题出在Webpack（v4）配置中，但是在检查了几个不同的示例后我找不到原因。
config / index.js
'use strict';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const resolve = (dir) => {
return path.join(__dirname, '..', dir);
};
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'build.js',
},
devServer: {
contentBase: path.join(__dirname, '../dist'),
historyApiFallback: true,
watchContentBase: true,
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader', 'vue-style-loader']
},
{
test: /\.css/,
use: 'css-loader'
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: true,
ecma: 8,
mangle: true
},
sourceMap: true,
})
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
}),
]
};
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
]);
};
src / router / index.js
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/views/HelloPage';
import About from '@/views/AboutPage';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
},
{
path: '/about',
name: 'About',
component: About,
}
]
});
src / views / AboutPage.vue
<template>
<div class="about">
<h1>About</h1>
<p>What is this about?</p>
</div>
</template>
<script>
export default {
name: 'About',
}
</script>
src / views / HelloPage.vue
<template>
<div class="hello">
<h1>Hello</h1>
<p>Hi there. {{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'This is a test',
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
p {
color: silver;
}
</style>
src / App.vue
<template>
<div id="app">
<router-link to="/hello">Hello</router-link>
<router-link to="/about">About</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Helvetica, sans-serif;
color: black;
}
</style>
src / main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
el: '#app',
router,
template: '<App />',
components: { App },
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Paste 4.0</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
我使用的命令
内部版本：NODE_ENV=production webpack --mode production --config config/index.js
开始：webpack-dev-server --mode development --config config/index.js --open
我从这两个命令中都没有收到任何错误或警告，并且在浏览器控制台（Chrome，Firefox）中也没有任何消息。所有页面保持空白，手动打开时没有收到Cannot GET /about消息。即使不存在的路由也不会收到该消息。浏览器检查器中的内容是：
更新：
现在显示<script>标签，并显示一些功能，但是页面仍然为空，没有错误出现。文件build.js可用，因为我可以通过localhost：8080 / build.js直接访问它
启动命令的输出（这两个组件缺少）：
> webpack-dev-server --mode development --config config/index.js --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /dist/
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 766e36fda2265e10c49a
Version: webpack 4.15.1
Time: 3621ms
Built at: 07/11/2018 12:04:44 PM
Asset Size Chunks Chunk Names
build.js 660 KiB main [emitted] main
index.html 209 bytes [emitted]
Entrypoint main = build.js
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 207 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./src/App.vue] 401 bytes {main} [built]
[./src/main.js] 168 bytes {main} [built]
[./src/router/index.js] 374 bytes {main} [built]
+ 28 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 351 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
在构建输出中，存在两个要做组件：
> NODE_ENV=production webpack --mode production --config config/index.js
Hash: f63c24ae8589460a1b7c
Version: webpack 4.15.1
Time: 2790ms
Built at: 07/11/2018 12:00:51 PM
Asset Size Chunks Chunk Names
build.js 90.9 KiB 0 [emitted] main
index.html 209 bytes [emitted]
[0] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-style-loader!./src/views/AboutPage.vue?vue&type=style&index=0&lang=css 162 bytes {0} [built]
[1] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-style-loader!./src/views/HelloPage.vue?vue&type=style&index=0&lang=css 162 bytes {0} [built]
[2] ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-style-loader!./src/App.vue?vue&type=style&index=0&lang=css 159 bytes {0} [built]
[5] (webpack)/buildin/global.js 489 bytes {0} [built]
[6] ./src/main.js + 6 modules 68.3 KiB {0} [built]
| ./src/main.js 168 bytes [built]
| ./src/App.vue 360 bytes [built]
| ./src/router/index.js 374 bytes [built]
| ./src/views/HelloPage.vue 369 bytes [built]
| ./src/views/AboutPage.vue 369 bytes [built]
| + 2 hidden modules
[7] ./src/views/AboutPage.vue?vue&type=style&index=0&lang=css 570 bytes {0} [built]
[8] ./src/views/HelloPage.vue?vue&type=style&index=0&lang=css 570 bytes {0} [built]
[9] ./src/App.vue?vue&type=style&index=0&lang=css 534 bytes {0} [built]
[13] multi ./src/main.js 28 bytes {0} [built]
+ 5 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] (webpack)/buildin/module.js 497 bytes {0} [built]
[1] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 351 bytes {0} [built]
+ 1 hidden module
1 个答案:
答案 0 :(得分：-1)
我认为App.vue中的脚本部分应该扩展Vue组件。
类似：
<script>
import Vue from "vue"; // First import Vue
export default Vue.extend({ // Then extend it creating your component
name: 'App'
});
</script>
其他.vue页面也是如此...
相关问题
- PHP显示空白页面
- Webpack：只使用dev服务器
- 无法使用vue cli webpack-simple运行npm dev
- webpack-dev-server获取空白屏幕
- 为什么Vue router / Webpack dev server显示现在无法刷新页面上的GET /路径？
- 为什么我的Vue应用程序在从webpack dev-server提供时不能运行？
- Webpack Dev Server不热重载.vue文件
- webpack / webpack-dev-server / react显示应该显示app
- 简单的Vue应用仅显示空白页面（webpack-dev-server）
- VUE + WEBPACK找不到#app
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？