时间戳

首页 > 解决方案 > 为 vue2js 应用程序实现 prerender SPA 插件

vue.js - 为 vue2js 应用程序实现 prerender SPA 插件

问题描述

我正在尝试实现非常流行的预渲染 SPA 插件。

文档说要向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 目录。在 config 目录内的这个新 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>

我做错了什么？

标签： vue.jswebpackvuejs2vue-cliprerender

解决方案

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

推荐阅读