浅谈Vue服务端渲染框架Nuxt的那些事

网络编程 2021-07-04 15:50www.168986.cn编程入门

这篇文章主要介绍了浅谈Vue服务端渲染框架Nuxt的那些事，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。

我们知道，SPA前端渲染存在两大痛点（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。

，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。

Vue官方SSR文档的配置太过繁琐，需要对node和webpack有相当不错的使用经验，对于一个前端小白而言，官方推荐NUXT。

NUXT是一款基于vue的服务端渲染框架，跟React的NEXT异曲同工。

最近公司在重构项目，为了有利于SEO，需要使用到服务端渲染，在查阅了一番资料后选择了，Nuxt.js 是一个基于 Vue.js 的通用应用框架，详情可以看，这里主要记录下在使用过程中遇到的问题及解决方案。

技术栈Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

项目构建

Nuxt.js 官方提供了脚手架「确保安装了npx（npx在NPM版本5.2.0默认安装了）」

npx create-nuxt-app <项目名> 按照提示选择适合自己项目的配置即可

然后 npm run dev。

遇到的问题

一、router自定义

发现现在很多的框架都有一套自己的路由生成规则（基于vue-router）然后在对应的目录下创建目录，即会自己生成对应的路由，如果对url的路径没有要求的这样也是可以的，如果想要自定义路由的话，就需要添加些配置。具体如下

  extendRoutes (routes, resolve) {
   routes.push({
    name: 'father',   / 自定义路由的name /
    path: '/father',  / 自定义路由的path /
    ponent: resolve(__dirname, 'pages/father/index.vue'), / 组件路径 /
    children: [{  / 子路由配置 （其它相同） /
     name: 'son',
     path: '/son',
     ponent: resolve(__dirname, 'pages/son/index.vue')
    },
    {
     name: 'daughter',
     path: '/daughter',
     ponent: resolve(__dirname, 'pages/daughter/index.vue')
    }]
   })
  }

对应的参考官方

自定义请求头（基于axios请求的base_url修改）

需求描述公司的有正式环境和特使环境对应不同的服务器，所以需要在请求的时候添加对应的请求头，具体配置可以参考如下代码

package.json配置

 "scripts": {
  "dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
  / 本地环境这里给环境变量NODE_ENV指定了对应的development的值和指定了运行端口 /
  "build": "cross-env NODE_ENV=online nuxt build",
  / 打包指定了环境变量的值为online /
  "start": "HOST=0.0.0.0 PORT=3333 nuxt start",
  / 打包指定了环境变量的值为online 端口为3333 HOST为0.0.0.0 百度了一下，
  0.0.0.0代表本机的所有ip地址,即同网段其他机器也可以访问的，
  默认的127.0.0.1由于和本地ip绑定了，所以只有绑定到本机地址的服务能被同网段其他机器访问/
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "premit": "npm run lint"
 },

axios.js配置

  / 自定义请求base_url /
if (process.env.NODE_ENV === 'test') {
 axios.defaults.baseURL = 'http://test'
} else if(process.env.NODE_ENV === 'online') {
 axios.defaults.baseURL = 'http://online'
} else {
  axios.defaults.baseURL = 'http://127.0.0.1'
}

这里使用的NODE_ENV由于在nuxt.js默认就存在，所以不需要定义这个变量，如果需要声明一个不存在的环境变量，需要在nuxt.config.js里面添加如下配置

/ 狼蚁网站SEO优化声明了一个PATH_TYPE变量，其余的不需要改变，只需要将对应的NODE_ENV改成PATH_TYPE即可 /
env: {
  PATH_TYPE: process.env.PATH_TYPE
}

一定要看备注要运行上面的示例，你需要运行npm install --save-dev cross-env 安装 cross-env。如果你在非Windows环境下开发，你可以不用安装cross-env，这时需要把 start 脚本中的cross-env去掉。

官方文档1. 2.

打包webpack配置

nuxt.js框架默认使用过了一套配置，看了编译出来的源码后发现css文件全部在源码里，感觉不是很利于收缩引擎的SEO，所以自定义了打包配置，代码如下

  optimization: {
   runtimeChunk: {
    name: 'manifest'
   },
   splitChunks: {
    chunks: 'all',
    cacheGroups: {
     libs: {
      name: 'chunk-libs',
      chunks: 'initial',
      priority: -10,
      reuseExistingChunk: false,
      test: /node_modules\/(.)\.js/
     },
     styles: {
      name: 'chunk-styles',
      test: /\.(scss|css)$/,
      chunks: 'all',
      minChunks: 1,
      reuseExistingChunk: true,
      enforce: true
     }
    }
   }
  },
  extractCSS: true, / 将css单独打包成一个文件，默认的是全部加载到有事业 /

参考文档 1.2

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：vue项目设置scrollTop不起作用(总结) 下一篇：JS二级菜单不同实现方法分析【4种方法】

浅谈Vue服务端渲染框架Nuxt的那些事

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

浅谈Vue服务端渲染框架Nuxt的那些事

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设