Nuxt 框架结合了 Vue 前端库的所有优势以及服务端渲染的优点。

下面的 SPA 渲染了一个简单的 Nuxt 页面，页面在浏览器屏幕中央显示文本 "Hello World"。请注意，App.vue 组件的定义与其他 Vue 组件相同。

自定义配置文件

我们无需一开始就了解应用的所有行为，因为很多功能可以在开发过程中逐步添加。但目前明确的一些需求可以作为良好的起点。

必需的行为

• 渲染模式：应设置为 universal（客户端与服务端同时渲染）。
• 开发服务器端口：应用本地运行时（通过 npm run dev 启动）所使用的端口。此处设为 8000。
• 元标签：用于设置应用的默认元信息，引入第三方脚本或 CSS，或添加默认页面标题。

配置

1// https://nuxt.com/docs/api/configuration/nuxt-config
2export default defineNuxtConfig({
3  ssr: true, // 启用服务端渲染
4  app: {
5    head: {
6      // <title>Educative 调查应用</title>
7      title: 'Educative 调查应用',
8      meta: [
9        // <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
10        {
11          name: 'viewport',
12          content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
13        },
14        // <meta name="description" content="使用我们的应用创建引人入胜的调查">
15        {
16          name: 'description',
17          content: '使用我们的应用创建引人入胜的调查'
18        }
19      ],
20      script: [
21        // <script src=""></script>
22        { src: '' }
23      ],
24      link: [
25        // <link rel="" href="">
26        { rel: '', href: '' }
27      ],
28      // 请注意，这部分内容可能会发生变化
29      style: [
30        // <style></style>
31        {
32          children: ''
33        }
34      ],
35      noscript: [
36        // <noscript>JavaScript 是必需的</noscript>
37        { children: 'JavaScript 是必需的' }
38      ]
39    }
40  },
41  devServer: {
42    host: 'localhost',
43    port: 8000
44  }
45})

总结

Nuxt 配置文件在应用初始化过程中起着至关重要的作用。本节课中，我们已成功将渲染模式设置为支持服务端渲染，配置了基础的 SEO 元标签，并完成了开发服务器的相关设置。

随着课程的推进，可能需要再次回到此文件，根据需求进行配置修改或新增配置项。