Приложение Simple 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>

источник/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>

источник/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

vue.js webpack-4 webpack-dev-server
person Juha Untinen    schedule 11.07.2018    source источник
comment
Кажется, что Webpack даже не видит два компонента представления, так как, например, строка Hi there не существует в конечном dist/build.js, хотя она существует в src/views/HelloPage.vue. Но странно, что этот файл существует в журнале сборки.   -  person Juha Untinen    schedule 11.07.2018
comment
Хорошо, я думаю, что это связано с сервером webpack-dev. Когда я запускаю сборку, появляются два компонента, но когда я запускаю сервер разработки, этих двух файлов нет в выходных данных сборки.   -  person Juha Untinen    schedule 11.07.2018
comment
Вероятно, что-то не так с файлом html-webpack-plugin. Исходный код HTML-страницы, который вы показываете в инспекторе браузера, даже не включает тег <script> для загрузки сценария вашего приложения.   -  person ghybs    schedule 12.07.2018
comment
Хм, я получил <script> после некоторой настройки, но страница остается пустой. Я обновил сообщение с последним содержимым файла.   -  person Juha Untinen    schedule 12.07.2018
comment
После еще одной отладки и настройки различных вещей я заработал, но даже после отмены этих изменений одно за другим у меня все еще нет объяснения, почему это не сработало изначально и, следовательно, в чем была причина. Посмотрим, смогу ли я определить причину.   -  person Juha Untinen    schedule 12.07.2018

Ответы (1)


arrow_upward
-1
arrow_downward

Я думаю, что раздел сценария из 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...

person tanathos    schedule 11.07.2018
comment
Хм, стандартный пакет Vue не использует это, но я все равно пытался. Не повезло. - person Juha Untinen; 11.07.2018
comment
Когда вы делаете npm install vue-cli && vue init webpack test-app, он создает App.vue с этим: <script>export default { name: 'App' }</script>, так что я не думаю, что дело в extend() - person Juha Untinen; 11.07.2018
comment
Ожидается, что @tanathos Vue SFC будет напрямую экспортировать параметры компонента, как описано в vue-loader спецификация SFC. Хотя экспорт Vue.extend() также поддерживается. - person ghybs; 12.07.2018