网站维护基本概念认知/企业网站推广方案设计毕业设计

目标：创建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