为 vue2js 应用程序实现预渲染 SPA 插件

Question

我正在尝试实现非常受欢迎的 prerender SPA plugin。

文档说要将模块添加到 webpack.config.js 但我没有这样的文件我有 webpack.base.conf.js、webpack.dev.conf.js 和 webpack.prod.conf.js。

第一个没有插件数组，但最后两个有。所以我注入了它们：

new PrerenderSPAPlugin({
    // Required - The path to the webpack-outputted app to prerender.
    staticDir: path.join(__dirname, 'dist'),
    // Required - Routes to render.
    routes: [ '/' ],
})

到插件数组，我在文件顶部需要它。然后我在命令行运行

> npm run build
> cd dist
> live-server

npm run build 在根目录中创建了 dist 文件夹，现在在我添加插件后，它会在 webpack.conf 文件所在的配置目录中添加 dist 目录。在配置目录中的这个新的 dist 文件夹中是 index.html 文件，它基本上是空的 html 模板：

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Not Found</pre>


</body></html>

我做错了什么？

Answer 1

我在 App.vue 的根组件中发现了我的错误。我的根 div 没有 id="app"。

为 vue2js 应用程序实现预渲染 SPA 插件

Implementing prerender SPA plugin to vue2js application

prerender

webpack

vue.js

vuejs2

vue-cli