【Nuxt.js搭建服务端渲染(SSR)网站】1.初体验_nuxtjs deployment target-优快云博客

本文链接：https://blog.youkuaiyun.com/qiyijay/article/details/110007911

本文详细介绍了如何在Mac上使用npx创建并配置Nuxt.js项目，包括遇到的错误与解决过程，以及后端渲染在SEO方面的优势。通过实例展示了项目结构和运行过程，重点突出了Nuxt.js在项目开发中的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的系统环境MAC，已安装好nodejs

1.安装

打开命令行，进入到想要安装项目的目录，我当前在 /Users/tom/private 目录下

创建的项目就叫 first-nuxt-app 吧

1.1 执行安装命令

npx create-nuxt-app first-nuxt-app

1.2 稍稍等待一会，出现这样的提示，即将创建一个版本号3.4.0的nuxt应用，要求输入项目名称：

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in first-nuxt-app
? Project name: (first-nuxt-app)

如果不输入，则使用括号里面的项目名称，回车确定

1.3 然后要求选择项目的语言

? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript

按上下键可以选择语言，我使用JavaScript，回车确定

1.4 选择包管理工具

? Package manager: (Use arrow keys)
  Yarn
❯ Npm

同样，按上下键可以选择你习惯使用的包管理工具，我使用npm，回车确定

1.5 选择一个UI框架

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

暂时只搭一个体验项目，就不用UI框架了，我选择None，回车

1.6 选择你想安装的模块

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content

多选项，上下键切换，空个键来选择或取消选择，这个是体验项目我就不选了，回车

1.7 一些检查工具

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

不选了，回车

1.8 测试用例框架

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO

回车

1.9 渲染模式

Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
  Single Page App

肯定是SSR啦~，回车

1.10 部署目标

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/JAMStack hosting)

默认Node.js，回车

1.11 后面还有一些开发者工具、Github用户名、版本控制的选择，统统默认回车

接下来就是一段等待时间

...

中途报了这个错（没报错的同学直接往下看第二小节）

/Users/tom/.npm/_npx/89479/lib/node_modules/create-nuxt-app/node_modules/sao/lib/installPackages.js:108
        throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
        ^

SAOError: Failed to install packages in /Users/tom/private/first-nuxt-app
    at ChildProcess.<anonymous> (/Users/tom/.npm/_npx/89479/lib/node_modules/create-nuxt-app/node_modules/sao/lib/installPackages.js:108:15)
    at ChildProcess.emit (events.js:209:13)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:430:11)
    at Socket.emit (events.js:209:13)
    at Pipe.<anonymous> (net.js:658:12) {
  __sao: true
}

虽然报错，但是目录已经创建成功，我先尝试用npm install安装后运行没有成功跑起来，最后我的解决办法是删掉已生成的目录重新安装，将步骤 1.1 命令换成yarn安装，其余还是按正常步骤走

#npx create-nuxt-app first-nuxt-app 不使用npx
yarn create nuxt-app first-nuxt-app

其实这里没有根本解决报错的问题，网上也没有查到解决报错的办法，如果有了解的同学评论告诉我~谢谢

...

安装完成后展示如下信息

🎉  Successfully created project first-nuxt-app

  To get started:

	cd first-nuxt-app
	npm run dev

  To build & start for production:

	cd first-nuxt-app
	npm run build
	npm run start

✨  Done in 160.05s.

目录结构概览

2. 运行

在开发模式下运行起来~

2.1 执行命令

npm run dev

第一次中途会出现这样一个选项

NuxtJS collects completely anonymous data about usage.                                                                                                                  23:33:29
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)

大概是开发团队想收集一些信息以便更好地服务这样的，作为一个热爱开源支持希望产品做的更好的人我当然是选择 Y 啊

✔ Client
  Compiled successfully in 4.20s

✔ Server
  Compiled successfully in 4.29s

ℹ Waiting for file changes   
ℹ Memory usage: 199 MB (RSS: 292 MB)                
ℹ Listening on: http://localhost:3000/

打出上述信息，就项目就跑起来了，访问一下localhost:3000看下~

好像也没啥特别的，那我们在浏览器再右键查看源代码看下渲染的代码，我们看到html源码已经跟常规vue打包的源码不一样了，内容提前写在了html里面

<!doctype html>
<html data-n-head-ssr>
<head>
    <title>first-nuxt-app</title>
    <meta data-n-head="ssr" charset="utf-8">
    <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
    <meta data-n-head="ssr" data-hid="description" name="description" content="">
    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="preload" href="/_nuxt/runtime.js" as="script">
    <link rel="preload" href="/_nuxt/commons/app.js" as="script">
    <link rel="preload" href="/_nuxt/vendors/app.js" as="script">
    <link rel="preload" href="/_nuxt/app.js" as="script">
    <link rel="preload" href="/_nuxt/pages/index.js" as="script">
    <style data-vue-ssr-id="7e56e4e3:0">
        <!--
        样式代码删掉省略
        -->
    </style>
</head>
<body>
<div data-server-rendered="true" id="__nuxt"><!----><!---->
    <div id="__layout">
        <div>
            <div class="container">
                <div>
                    <svg width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg"
                         class="NuxtLogo">
                        <path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
                              fill="#00C58E"></path>
                        <path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
                              fill="#108775"></path>
                        <path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
                              fill="#2F495E"></path>
                    </svg>
                    <h1 class="title">
                        first-nuxt-app
                    </h1>
                    <div class="links"><a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer"
                                          class="button--green">
                        Documentation
                    </a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" rel="noopener noreferrer"
                            class="button--grey">
                        GitHub
                    </a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>window.__NUXT__ = {
    layout: "default",
    data: [{}],
    fetch: [],
    error: null,
    serverRendered: true,
    routePath: "\u002F",
    config: {},
    logs: []
};</script>
<script src="/_nuxt/runtime.js" defer></script>
<script src="/_nuxt/pages/index.js" defer></script>
<script src="/_nuxt/commons/app.js" defer></script>
<script src="/_nuxt/vendors/app.js" defer></script>
<script src="/_nuxt/app.js" defer></script>
</body>
</html>

接下来再做个试验，修改展示的数据，看下效果

找到/pages/index.vue文件，增加如下代码：