Nuxt.js开启SSR渲染及打包发布

jiangjialuan2

已于 2022-05-07 15:51:19 修改

阅读量1.9k

点赞数

分类专栏： html5 vue 文章标签： vue.js 服务器

于 2022-04-21 17:29:01 首次发布

本文链接：https://blog.csdn.net/jiangjialuan2/article/details/124326570

版权

html5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

什么是SSR？

SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

那服务器端渲染到底有什么好处呢？

(1)SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
(2)更快内容到达时间传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

Nuxt.js是特点（优点）：

•自动代码分层
•服务端渲染
•强大的路由功能，支持异步数据
Nuxt环境搭建：
（1）用npm来安装vue-cli这个框架。
（2）使用vue安装 nuxt

vue init nuxt/starter

（3）使用npm install安装依赖包

Nuxt目录结构
在这里插入图片描述

Nuxt常用配置项

/package.json
 
"config":{
 "nuxt":{
  "host":"127.0.0.1",
  "port":"1000"
 }
 },

配置全局CSS

/nuxt.config.js
 css:['~assets/css/normailze.css'],

配置webpack的loader

//比如现在我们要配置一个url-loader来进行小图片的64位打包。
//就可以在nuxt.config.js的build选项里进行配置
build: {
 loaders:[
  {
  test:/\.(png|jpe?g|gif|svg)$/,
  loader:"url-loader",
  query:{
   limit:10000,
   name:'img/[name].[hash].[ext]'
  }
  }
 ],

 }

标签params传递参数

<ul>
  <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
  <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
  <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
 </ul>
//在new.vue里面
<p>NewsID:{{$route.params.newsId}}</p>


//又如：
<li><a href="/news/123" rel="external nofollow" >News-1</a></li>
  <li><a href="/news/456" rel="external nofollow" >News-2</a></li>
///pages/news/_id.vue
<h2>News-Content [{{$route.params.id}}]</h2>

参数校验
使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面。

/pages/news/_id.vue
 
export default {
 validate ({ params }) {
 // Must be a number
 return /^\d+$/.test(params.id)
 }
}

Nuxt的路由动画效果

例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个normailze.css文件。

/assets/css/normailze.css(没有请自行建立)

.page-enter-active, .page-leave-active {
 transition: opacity 2s;
}
.page-enter, .page-leave-active {
 opacity: 0;
}
//然后在nuxt.config.js里加入一个全局的css文件就可以了
css:['assets/css/main.css'],
//这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是<nuxt-link>组件来制作跳转链接。你需要进行更改。

Nuxt的默认模版和默认布局

Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。

<!DOCTYPE html>
<html lang="en">
<head>
 {{ HEAD }}
</head>
<body>
 <p>这是可以随便写些什么会在每个页面都会显示的</p>
 {{ APP }}
</body>
</html>

Nuxt的错误页面和个性meta设置

在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。

<template>
 <div>
  <h2 v-if="error.statusCode==404">404页面不存在</h2>
  <h2 v-else>500服务器错误</h2>
  <ul>
   <li><nuxt-link to="/">HOME</nuxt-link></li>
  </ul>
 </div>
</template>
<script>
export default {
 props:['error'],
}
</script>

个性meta设置

 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }

asyncData方法获取数据

asyncData(){
  return axios.get('https://api.myjson.com/bins/1ctwlm')
  .then((res)=>{
   console.log(res)
   return {info:res.data}
  })
 }
//或者
async asyncData(){
  let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
  return {info: data}
 }

打包发布
拷贝下面标记的文件至服务器部署目录

在这里插入图片描述
执行代码

npm install -production

npm run start

如果服务器是ngxin,配置如下代码

server {
    listen 80;
    server_name www.test.com;
    
    location / {
        root /opt/deploy/front; # 前端文件目录
        proxy_pass http://127.0.0.1:3000;
    }
}

如果想改变端口号，直接在package.json里面去加一段

"config": {
        "nuxt": {
            "host": "0.0.0.0",
            "port": "3333"
        }
    }

nuxt中npm run dev/npm run build/npm run generate区别

npm run dev:开发模式
npm run build/npm run start;项目打包
npm run generage/npm run start;静态化项目

Nuxt.js服务器端渲染工作流程
1）用户打开浏览器，输入网址请求到Node.js中的前端View组件
2）部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
3）Nuxt.js获取到数据后进行服务端渲染
4）Nuxt.js将html网页响应给浏览器

欢迎加入前端群一起讨论：
永久有效不过期
在这里插入图片描述

jiangjialuan2

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
Nuxt.js开启SSR渲染及打包发布

vue,nuxt.js
复制链接

扫一扫

专栏目录

Nuxt.js开启SSR渲染及打包发布

“相关推荐”对你有帮助么？