Vue 创建 Nuxt 项目 SSR 服务器渲染 解决 SPA 单页面 SEO优化 问题 (详细教程)

Vue SSR 服务器渲染 解决 SPA 单页面 SEO优化 问题

构建步骤

1. 创建nuxt 项目

检查 npx

    // npm 5.2.0 以上版本默认包含 npx 
    // 创建项目
    npx create-nuxt-app project_name

Choose the package manager Yarn 需要安装 yarn 安装 yarn

yarn 下载

配置参考

在这里插入图片描述

配置详解

? Project name nuxttest							//项目名称
? Project description My astounding Nuxt.js project		//项目描述
? Author name forever									//作者姓名
? Choose programming language JavaScript			//选择开发的语言 javascript or typescript
? Choose the package manager Yarn				//选择包管理的工具 npm or yarn
? Choose UI framework Element					//选择一个UI框架
? Choose custom server framework Express			//选择一种服务端框架
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) //检查代码是否规范
? Choose test framework None						//选择一个测试框架
? Choose rendering mode Universal (SSR) 			//选择一种渲染模式 SSR or SPA
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

运行

npm start

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycDDYyZZ-1588517257568)(/img/bVbGJlA)]

访问报错 NuxtServerError:Request failed with status code 500

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVtqRlvs-1588517257571)(/img/bVbGJmi)]

解决

//升级 npm 
npm install npm -g

重新运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDXOlwcQ-1588517257578)(/img/bVbGJmq)]

运行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pxdn8874-1588517257579)(/img/bVbGJmY)]

目录结构

Nuxt.js