如何预渲染 Vue3 应用程序？

Question

我尝试将预呈现（或 SSG）应用到我的 Vue3 应用程序以使其对 SEO 更友好，但没有成功。

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

ERROR TypeError: Cannot read properties of undefined (reading 'endsWith')

之后我尝试了 prerender-spa-plugin 但是当我创建 npm run build:

时出现错误

[prerender-spa-plugin] Unable to prerender all routes! ERROR Error: Build failed with errors. Error: Build failed with errors. at /Users/myusername/Workspace/myproject/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23 at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8 at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3

你怎么看这件事？你有什么想法吗？

Answer 1

Nuxt3 是一个非常强大的 meta-framework 和 lot of features and huge ecosystem。同时，它现在在 RC2 中，所以不是 100% 稳定（可能仍然工作得很好）。
如果您的项目旨在实现更简单的目标，我建议您使用 Vitesse。它可能更稳定一些，并且可能足够强大（查看它附带的内容以帮助您做出决定）。

一些解决方案如 Prerender 也存在，但它是付费的，不如一些真正的 SSG (/SSR)。此外，它更像是一种免费增值服务。

Answer 2

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

在nuxt.config.ts中使用：

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

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

第二个话题是要有一个i18n模块，vue-i18N好像不行了

谢谢。

如何预渲染 Vue3 应用程序？

How to prerender a Vue3 application?

vue.js

nuxt.js

vuejs3

prerender

nuxtjs3