如何预渲染 Vue3 应用程序？

Question

我尝试在我的 Vue3 应用程序中应用预渲染（或 SSG）以使其对 SEO 更加友好，但没有成功。

我找到了 vue-cli-plugin-prerender-spa，当我使用命令行尝试它时：

vue add prerender-spa

我遇到了错误：

错误类型错误：无法读取未定义的属性（读取“endsWith”）

之后我尝试了

prerender-spa-plugin

，但是当我制作

npm run build

时出现错误：

[prerender-spa-plugin] 无法预渲染所有路线！ 错误错误：构建失败并出现错误。 错误：构建失败并出现错误。 在/Users/myusername/Workspace/myproject/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23 在/Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8 在/Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3

你对此有何看法？你有什么想法吗？

Answer 1

Nuxt3 是一个非常强大的元框架，具有很多功能和庞大的生态系统。同时，它现在处于 RC2 阶段，所以不是 100% 稳定（可能仍然工作得很好）。
如果您的项目的目标是更简单，我建议使用Vitesse。它可能更稳定一点，并且可能足够强大（检查它附带的内容以帮助您做出决定）。
还有vite-plugin-ssr可以使用。

像Prerender这样的一些解决方案也存在，但它是付费的，并且不如一些真正的SSG（/SSR）。而且，它更像是免费增值。

Answer 2

我一直在努力解决相同的错误输出，直到找到 prerender-spa-plugin-next。然后我注意到最新版本的 prerender-spa-plugin 已于 4 年前发布，并且 prerender-spa-plugin-next 正在不断更新。看起来 prerender-spa-plugin-next 是 prerender-spa-plugin 的新版本，具有相同的功能。所以我使用 prerender-spa-plugin-next 而不是 prerender-spa-plugin 然后一切正常！

这是我的步骤：

1. 安装软件包

npm i -D prerender-spa-plugin-next

2. 修改 vue.config.js

const plugins = [];

if (process.env.NODE_ENV === 'production') {
  const { join } = require('path');
  const PrerenderPlugin = require('prerender-spa-plugin-next');

  plugins.unshift(
    new PrerenderPlugin({
      staticDir: join(__dirname, 'dist'),
      routes: ['/'], //the page route you want to prerender
    })
  );
}


module.exports = {
    transpileDependencies: true,
    configureWebpack(config) {
        config.plugins = [...config.plugins, ...plugins];
    },
};

3. 构建

npm run build

然后检查dist文件夹下的index.html，可以看到页面已经预渲染了。

更多用法参考prerender-spa-plugin-next

主页

Answer 3

找到并修复要导入的 scss 文件。

在 nuxt.config.ts 中使用：

vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                  @import "@/assets/scss/_variables.scss";
                  @import "@/assets/scss/my-style.scss";
                `
            }
        },
    },
}

现在我的两个主要问题是：如何正确安装 vuetify，目前 syles 和组件似乎可以工作，但 JS 不能，例如，手风琴在单击时不会展开。

第二个主题是有一个 i18n 模块，看来 vue-i18N 不再起作用了。

谢谢。