带vue-i18n的prerender-spa-plugin不会预渲染组件的内容

Question

我在一个非常小的项目中将Vue与prerender-spa-plugin和vue-i18n一起使用。我通过键入vue init webpack-simple vue-static启动了该项目。

当我使用vue-i18n时，prerender-spa-plugin不呈现组件。如果我评论vue-i18n的东西，它会的。我试图编辑main.js文件中的路由以及webpack.config.js中PrerenderSpaPlugin的配置，将语言添加到url中，但仍然无法正常工作。 Vue组件只有两个，它们也只有一个模板。

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var PrerenderSpaPlugin = require('prerender-spa-plugin') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([

        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),

        new HtmlWebpackPlugin({
          template: 'index.html',
          filename: path.resolve(__dirname, 'dist/index.html')
        }),
/*
        new HtmlWebpackPlugin({
          template: './index.html',
          inject: false
        }),
    */
        new PrerenderSpaPlugin(
          // Absolute path to compiled SPA
          path.resolve(__dirname, './dist'),
          // List of routes to prerender
          [ '/','/about' ],
          {
            // Options 
          }
        ),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })

  ])
}else {
  // NODE_ENV === 'development'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    new HtmlWebpackPlugin({
      title: 'DEVELOPMENT prerender-spa-plugin',
      template: 'index.html',
      filename: 'index.html',
      //favicon: 'favicon.ico'
    }),
  ])
}

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'  // Add this
import VueI18n from 'vue-i18n'
import About from './components/About'
import Home from './components/Home'

import messages from './copy'

Vue.use(VueRouter)                  // Add this
Vue.use(VueI18n)

const routes=[
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

let locale = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');

const i18n = new VueI18n({
  locale: (locale.trim().length && locale != "/") ? locale : 'en', // set locale
  messages, // set locale messages
})

const router= new VueRouter({
   base: (locale.trim().length && locale != "/") ? '/' + locale : 'en',
   routes,
   mode:'history',
   scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
 })

new Vue({
  el: '#app',
  router,  
  i18n, 
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </p>
       <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>