seo服务器渲染(吃鸡seo是什么服务器)

使用 Nuxt.js实现SSR服务器端渲染之nuxt.config实战配置详解

Nuxt.js的服务器端渲染非常有利于SEO,我们也说到了服务器端渲染并不是一项新技术,但Nuxt.js可是新框架。

Nuxt.js虽然在语法上和Vue基本一致,但用法也有很多不同的地方,如果直接将Vue的方式使用到Nuxt.js上会导致无法实现服务器端渲染的情况出现。

我们简单将Nuxt.js和Vue.js做一个对比

  • 打包后的输出文件
  1. vue: dist
  2. nuxt: .nuxt(有些编译器默认不显示 点文件)
  • 页面渲染方式
  1. vue:客户端渲染,虚拟DOM ,通过ajax方式实现
  2. nuxt: 服务器端渲染,在服务器端完成页面组装,可实现页面静态化。
  • 部属方式
  1. Vue:只需要部属打包后文件既dist到服务器即可,不自带服务器,需要使用Ngix或者其方式做web服务器.
  2. Nuxt:除node_modules,.git外需要部署几乎所有文件到服务器,自带服务端,需要pm2管理(部署时需要reload pm2),需要nginx做代理.
  • 项目入口
  1. vue: /src/main.js ,在main.js可以做一些全局注册的初始化工作
  2. nuxt:没有入口文件,通过nuxt.config.js来进行指定配置
  • 路由实现方式:
  1. vue:自己在router中编写路由
  2. nuxt:依据 pages 目录结构自动生成 vue-router 模块的路由配置。
使用 Nuxt.js实现SSR服务器端渲染之nuxt.config实战配置详解

接下来我们完成一个项目的搭建:

nuxt很贴心的为大家准备的脚手架:

npx create-nuxt-app <项目名>

接下来会让你选择一系列的配置:常见的配置是 服务器端用express或者koa, 数据获取选择axios,如果选了axios,则会帮你在nuxt实例下注册 $axios ,让你可以在.vue文件中直接 this.$axios 发起请求。

nuxt提供了nuxt.config.js来配置我们的开发环境,并默认的配置涵盖了大部分使用情况。

我们重点聊聊nuxt.config.js 的配置,其他的以后详细讲解。

模式为通用模式:

 mode: 'universal'

head用来设置页面头部可以多放一些文案供爬虫抓取

 head: {
 title: 'xxxx有限公司的网站',
 meta: [{
 charset: 'utf-8'
 },
 {
 name: 'keywords',
 content: '俺们公司是干啥的,俺们公司啥都干'
 },
 {
 hid: 'description',
 name: 'description',
 content: '俺们公司是干啥的,俺们公司啥都干!修高铁,擦核电站,捞鱼雷,抓火箭'
 }
 ],
 link: [{
 rel: 'icon',
 type: 'image/x-icon',//你们公司的的小icon在这里设置
 href: '/favicon.ico'
 }]
 },

loading样式设置,当然也可以自定义loading,如果你需要的话:

 loading: {
 color: '#29a31a',
 height:'1px',
	duration:2000
 },

css全局配置:

 css: [{
 src: '~assets/css/base.scss',
 lang: 'scss',
 },
 {
 src: 'element-ui/lib/theme-chalk/index.css'
 }
 ],

第三方插件配置:

 plugins: [
 '@/plugins/element-ui'
 ],

相应的配置完使用的话你还需要在plugins文件夹下进行调用

第三方模块库的使用

 modules: [
 '@nuxtjs/axios',
	 '@nuxtjs/proxy'
 ],

页面切换动画

 //页面切换动画
 transition:{
	 name:'page',
	 mode:'out-in'
 },

需要在公用css里放置如下代码动画才能生效:

// 全局页面切换动画
.page-enter-active, .page-leave-active {
 transition: opacity .5s;
}
.page-enter, .page-leave-active {
 opacity: 0;
}

代理端口:

 proxy: {
 '/api/': { target:'http://xxxx/api', pathRewrite: {'^/api/': ''} }
},

调用端口的时候就不用从http开始写起了,直接从/api写起。

按需引入element-ui:

 build: {
 // 按需引入element-ui
 babel: {
 plugins: [
 [ "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"},
 ]
 ]
 },
}

下次再聊。请关心我的账号,持续技术探讨,源码暴力拆解分享。

使用 Nuxt.js实现SSR服务器端渲染之nuxt.config实战配置详解


本文链接:http://www.cdwelead.comhttp://www.cdwelead.com/gnxw/24876.html
上一篇:seo 关键词密度(seo关键词密度计算)
下一篇:没有了

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!