【Nuxt3 ssr 服务器渲染 】

Nuxt3 ssr 服务器渲染

前言 大家肯定遇到这样的面试题vue怎样seo？vue怎样提高首页速度？那么答案之一就是ssr服务器渲染。
vue的ssr技术最好的选择就是nuxt了！因为迁移起来非常简单而且也可以使用vue原来的api。

这是nuxt3官方网站 因为目前vue3越来越流行了所以这里我们从3开始。

第一步安装 这里你需要安装npx管理工具
npm install -g npx
然后利用npx创建项目
npx nuxi init nuxtTest
安装依赖
npm i
这里是你的目录结构
输入npm run dev可以运行项目

pages

在根目录创建pages文件夹

大家可以很明显的看到app.vue
没错这里就是咱们整个项目的“入口”

可以看到这里有一个Nuxtwelcome
是不是很像咱们vue中的router-view
其实他还有一个兄弟叫做

NuxtWelcome就是字面意思Nuxt的欢迎页
NuxtPage才是咱们的router-view
那这里我们把他改成NuxtPage

既然有了router-view很多那配置文件在哪里呢？
这里我们不用在npm vue-router了。nuxt是自带路由的
只不过是文件约束方式的配置方法.
用大白话来说就是你的文件夹名就是路由名。
在根目录下创建一个文件夹pages 创建默认文件index.vue
这就类似与我们router下的/ 会第一个访问此页面

我们在这里写入代码然后run dev

我们就可以看到第一个页面了

如果遇到路由传参怎么办呢
举个例子
http://192.168.70.90:3001/111/222

我们需要对应的创建文件夹并用”[]”包裹 这就代表了参数名
我们在pages下在创建两个个文件夹和一个vue文件
注意第一个文件夹不用包裹

在nuxtContent.vue里我们就可以获得这两个参数了 并且参数名叫做nuxtOne nuxtContent
下面我们获得一下参数并且打印

可以看到打印出了这两个参数

public

在根目录新建一个public目录随便放入一张图片1.png
然后执行 npm run build
会在根目录里生成一个.output文件夹

可以看到我们刚才放入的1.png也在里面
所以所有的外部资源要放入public文件夹中

components

在根目录创建components文件夹
来看看components目录与父子互传
上代码
新建components目录
写一个弹窗 wAlert.vue

  <div class="w_o_d">
    <div class="o_d_d">我是一个弹窗</div>
  </div>

在父vue中引入 vue3中import之后可以直接在template标签中引入

这是目前的页面

接着我们引入sass给弹窗写一个样式 变成一个全屏的弹窗 来演示父子传参
（父页面给子页面传一个字符串作为显示内容，子页面给父页面传一个函数用作关闭页面）
npm i sass

父传子 父页面

父传子 子页面

来看一下父页面的效果

我们开始子传父
子传父 子页面

子传父 父页面

Axios

导入axios的方法与vue3一样
npm i axios

import axios from "axios";

使用起来没有任何区别就不说了

Vuex

Nuxt3中不支持vuex了 改用了pinia
具体可以查看文档
https://pinia.vuejs.org/introduction.html

浏览器对象

因为在服务端渲染所以没有浏览器对象 比如alert就会报错
这里nuxt3给了一个布尔判断可以结合if使用

if (process.client) {//服务器渲染完成可以获得浏览器对象
window.alert("得到了浏览器对象");
 	window.document.getElementById("id")
}

架设服务

最后就是架设起服务了
默认端口是3000 如果需要修改的话
官方推荐是使用pm2

或者打包npm run build
然后在根目录输入命令
node .output/server/index.mjs
这就是我对nuxt3目前的总结了

看 右键页面已经可以看到服务的推过来的html代码了 seo就完成了

Demo
Git: https://github.com/dawufan/nuxtDemo

我的qq 1172289218