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