利用nuxt3+vue3的项目解决seo问题

目标：创建nuxt3+vue3的项目解决seo问题，在不改动服务器现有配置的情况下，本地将vue代码打包成便于seo的html格式。

成品展示：

（可以先看这个，看一下是不是你需要的结果）

一、初始化

1、官方Installation · Get Started with Nuxt，中文网站介绍 · 快速入门 Nuxt

npx:
npx nuxi@latest init <project-name>
pnpm:
pnpm dlx nuxi@latest init <project-name>

2、自己去GitHub下载（这个我用的较多，因为第一种方式我使用失败了）

点击链接：GitHub - nuxt/starter at v3

直接点绿色code的按钮，之后点击最下方下载压缩包，之后解压即可。

二、启动

1、npm和pnpm用官网方式打开即可Installation · Get Started with Nuxt（npm为node所带）；或用yarn（我用的yarn，这个稳定且快一点）

npm install yarn -g

之后运行

yarn

2、启动调试

yarn dev -o
//加-o会自动打开浏览器，不加则不会

3、我这还引入了Naive UI的ui库（nuxt.config.ts还需要设置，主要看一下这个文档即可）

//终端引入代码
npm i -D naive-ui

//页面中引入代码（非全局）
<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>

//页面中引入代码（全局）
import { createApp } from 'vue'
import naive from 'naive-ui'

const app = createApp(App)
app.use(naive)

三、打包

1、本地将vue代码打包成便于seo的html格式。

在nuxt.config.ts中加入generate配置，整体代码如下：

export default defineNuxtConfig({
  devtools: { enabled: true },
  generate: {
    // 配置生成的静态文件的路由
    routes: [
      '/', // 配置需要预渲染的路由
      '/test',
      '/test-2'
    ],
    // 配置静态文件生成的文件名
    fallback: true, // 在404情况下是否回退到首页
    dir: 'dist' // 配置生成的静态文件目录
  }
})

配置好之后，终端输入（这里并没有build，因为我的目标就是本地打包好，不动服务器方面的东西）：

yarn generate