记一次Nuxtjs项目实战开发

迪迦Monster
1,114 阅读3分钟

    最近在使用Nuxtjs重构公司之前用Vue-cli创建的单页面项目，目的是可以更好优化SEO，旧版的应用代码迁移过程还是很难受的，需要区分服务端与客户端发起的请求，常见的报错都是在服务端过程中使用到客户端的东西（如：window、document）

一、项目结构

1.1 文件目录
assets/
--| ... 存放scss/less/css样式文件
components/
--| ... 页面组件
layouts/
--| ... 公用布局（头部/底部/404）
locales/
--| ... 语言包
middleware/
--| ... 中间件
pages/
--| ... 页面模块、路由会根据该目录下的文件自动生成
plugins/
--| axios.js
--| i18n.js
--| element-ui.js
--| ... 插件、全局组件、函数、指令引入...
server/
--| index.js  本地服务
static/
--| ... 存放jpg/png/svg/ico/js 等...
store/
--| ... Vuex状态管理
nuxt.config.js //nuxt项目配置文件
pm2.config.js //pm2-nodejs进程管理
package.json
README.md
.babelrc
.gitignore
1.2 Git分支管理
master - 生产环境代码分支，放生产环境所需文件

Test - 测试环境代码分支，放测试环境所需文件

Develop - 最新开发代码，其它业务开发分支基于该分支创建

BuildDev - 用于管理打包最新的开发代码，提供Test/master分支合并更新。
1.3 项目脑图

npm run updateTest命令跑的是事先写好的.sh文件，会自动执行①Nuxt代码构建+Git push提交、②切换Test/master分支、③合并更新BuildDev最新代码文件，最终会在Test/master分支将所需文件提取到生产环境运行。（.sh文件只放在BuildDev分支，在其他开发分支无法执行该命令）

生产环境所需文件

二、所遇问题记录

2.1 服务端请求报错：Error: getaddrinfo ENOTFOUN

项目在打包到生产环境后，发现服务端发起接口请求报错，游览器请求正常，报错信息如下：

Error: getaddrinfo ENOTFOUND pre.xxxx.io pre.xxxx.io:443
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)

解决方法

在生产环境服务器中的hosts文件，添加请求地址解析：ip+域名 （这个问题我有点迷，因为不懂运维那边的具体nginx配置，最终也不知道是什么原因造成）

2.2 举例Nuxt业务场景：“希望在任何页面刷新初始化时，都需要在服务端调用某些接口获取数据存储在Vuex中”

在 store/index.js actions中添加nuxtServerInit函数，加上需要在服务端就需要调用的请求

export const actions = {
  async nuxtServerInit({ dispatch }, { req }) {
    try {
      await dispatch("getSomeDatas");
    } catch (e) {
      console.log(e,'catch error');
     }
  }
}
2.3 在游览器控制台打印服务端请求接口响应信息

当nuxt项目build构建放到测试/生产环境后，服务端请求的响应的信息只有在报错时才会有信息输出到pm2生成的log文件，但是有时候我们需要看到接口正常响应的数据信息就很无奈了。

想了个临时方法暂时处理这个问题，当需要存储的数据越来越多时就会影响性能/页面挂掉。若有更好的实现方式，希望赐教(#^.^#)。

实现思路：

  • 在plugins/axios.js中将process.server===true返回信息通过store.commit存储到Vuex
  • 在layout公用组件(如：header.vue)created生命周期中process.server===false时添加document.addEventListener自定义事件,当触发该事件时打印服务端请求返回的数据。
  • 在window全局对象中新增一个用于触发打印服务端请求信息的函数
document.addEventListener('ServerMsgEvent',e=>console.log(e.detail)); //订阅事件
window.showMsg = document.dispatchEvent(
    new CustomEvent('ServerMsgEvent',{detail:'Server Request Message'})
); //触发事件

showMsg() //log: Server Request Message

☺-End-☺

前段时间也有接触过React的Nextjs，与Nuxtjs还是很多相同之处的，学会其中一个后相信上手都挺快的。由于我用Vue写业务的时间比较长，所以还是比较喜欢用Nuxtjs(#^.^#)，如果追求代码可观性的朋友可以尝试一下在Nextjs中引入Typescript，代码看起来还是相当漂亮的~

本文完 - 感谢阅读.

avatar
文章
阅读
粉丝