搭建ssr服务器教程(香港服务器搭建ssr)

zzxiexin 4 0

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

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

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

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

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

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"}, ] ] },}

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

标签: #搭建ssr服务器教程

  • 评论列表

留言评论

 
QQ在线咨询
售前咨询电话
173-175-32776
技术支持电话
173-175-32776
嘿,欢迎咨询