Nuxt.js实用配置详解

前段时间公司刚用Nuxt.js做了一个项目，但只是在公司内部分享，整理出来发出去。本文比较适合刚接触Nuxt.js的同学，主要讲一些构建过程中做的配置。建议第一次使用Nuxt.js的同学，在回看我的文章之前，先把官方文档看一遍。

首先，为什么要使用Nuxt.js

原因不用多说，就是利用Nuxt.js的渲染能力来解决Vue项目的SEO问题。

第二，Nuxt.js和纯Vue项目的简单比较

1.构建后的不同目标产品

vue: dist

nuxt:nuxt

2.网页呈现过程

Vue:客户端渲染，先下载js，再通过ajax渲染页面；

Nuxt:服务器端渲染，可以使服务器在拼接html后直接返回，第一屏可以使其无需发起ajax请求；

3.部署流程

Vue:只是把dist目录部署到服务器上，没有服务器，需要用nginx作为Web服务器；

Nuxt:几乎所有文件都需要部署到服务器(node_modules除外，git)，具有自己的服务器和pm2管理(在部署期间重新加载pm2)。如果需要域名，则需要nginx作为代理。

4.项目入口

Vue: /src/main.js可以在main.js中做一些全局注册的初始化；Nuxt:没有main.js入口文件，项目初始化的操作需要通过nuxt.config.js进行配置和指定

第三，从头开始构建一个Nuxt.js项目，并配置一个新项目

直接使用脚手架进行安装：

npx create-nuxt-app的项目名称

选择以上选项。

值得一提的是，关于选择定制服务器框架，可以根据业务情况选择服务器框架。常见的有Express和Koa，默认为None，即Nuxt默认服务器。我在这里选择了快递。

选择默认的Nuxt服务器不会生成服务器文件夹，所有的服务器渲染操作都由Nuxt为你完成，不需要关心服务器的细节，开发体验更接近Vue项目。缺点是不能在服务器上做一些自定义操作。选择其他服务器框架，如Express，将生成一个服务器文件夹，这将帮助您构建一个基本的Node服务器环境，您可以在其中执行一些节点操作。比如我们公司的业务需求(解析protobuf)使用Express，在真实的服务器api上做一层转发。在节点端解析protobuf后，json数据返回给客户端。还有Choose nuxt.js.js模块，可以选择axios和PWA。如果选择了axios，它将帮助您在nuxt实例下注册$axios，以便您可以直接请求它。$axios在。vue文件。

打开eslint检查

在nuxt.config.js的build属性下添加：

build: { extend (config，CTX){//save if(CTX . isdev CTX . isclient)上运行esLint { config . module . rules . push({ enforce : ' pre '，test: /\。(js | vue) $/，loader : ' eslit-loader '，exclude 3360/(node _ modules)/})} }以便您可以在开发过程中通过保存文件来检查语法。nuxt使用的默认规则是@nuxtjs(底层来自eslint-config-standard)，规则配置在/.eslintrc.js:中。

module.exports={ root: true，env: { browser: true，node: true }，parseroptions : { parser : ' babel-eslint ' }，extends 3360[' @ nuxtjs '，//此规则对应于此依赖关系：@ nuxtjs/eslint-config ' plugin 3360 nuxt/recovery ']。//在此添加您的自定义规则规则： { ' nuxt/no-cjs-in-config ' : ' off ' } }如果您不习惯使用标准规则，可以将@nuxtjs更改为其他内容。

使用dotenv和@nuxtjs/dotenv统一管理环境变量

在节点端，我们喜欢使用dotenv来管理项目中的环境变量，并将所有的环境变量放入。根目录下的env。

安装：

npm的使用i dotenv:创建一个新的。env文件，并写入要管理的环境变量，如服务器地址APIHOST :

apihost=http://your _ server.com/API在/server/index.js中使用(此文件是通过选择Express服务器框架自动生成的):

Require('dotenv ')。config()//可以通过process.env使用console . log(process . envapihost)//http://your _ server.com/API，此时我们只让服务器使用的文件。env，但Nuxt客户端无法使用。环境。根据Nuxt.js文档，您可以更改客户端的环境变量。

module . exports={ en v 3360 { base URL : process . env . base _ URL | | ' http://localhost :3000 ' } }但是如果节点和客户端需要使用相同的环境变量(后面提到API身份验证时会使用相同的SECRET变量)，在nuxt.config.js和中维护这个字段就比较麻烦了。同时env。我们更喜欢只需要在一个地方维护环境变量。所以为了解决这个问题，我找到了@nuxtjs/dotenv的依赖关系，使得nuxt的客户端可以使用。env直接，符合我们的预期。

安装：

NPM I @ nuxtjs/dot NV客户端也是通过process.env.XXX来使用的，这里就不多举例了。

这样，我们就可以通过包dotenv和@nuxtjs/dotenv统一管理开发环境中的变量。

此外，@nuxtjs/dotenv允许您在打包时指定其他env文件。例如，在开发时，我们使用。但是我们希望在打包的在线版本中使用其他环境变量。此时，我们可以在构建时指定另一个文件，如env.prod，只需在nuxt.config.js中指定：

module . exports={ modules :[[' @ nuxtjs/dot env '，{ filename 3360 }。环境。prod ' }]//指定打包时要使用的dotenv，} @ nuxtjs/toast模块

Toast可以说是一个非常常见的功能，一般UI框架中都有。但是，如果您的站点不使用UI框架，并且警报太难看，您可能希望介绍这个模块：

然后在nuxt.config.js中引入了Npm install @nuxtjs/toast

模块。exports={ modules :[' @ nux js/toast '，[' @ nux js/dot env '，{filename: '。env . prod ' }]//指定包装中使用的dotenv。Toast: {//toast模块配置位置：‘上中’，时长： 2000}}这样，nuxt会在全局注册$toast方法供你使用，非常方便：

这个。$toast.error('服务器弃用~~ ')这个。$toast.error('请求成功~~')API身份验证

对于一些敏感的服务，我们可能需要对API进行认证，防止人们轻易窃取我们节点端的API，所以我们需要制定一个API认证机制。常见的方案是jwt。请参考阮的介绍：《JSON Web Token 入门教程》。如果场景简单，可以自己设计。这里有一个想法：

客户端和节点在环境变量中声明一个秘钥：SECRET=xxxx，注意这是保密的；客户端发起请求时，用当前时间戳和SECRET通过一定的算法生成签名，请求时带时间戳和签名；收到请求后，节点获得时间戳和签名，并使用相同的算法再次生成signature _signature。使用相同的算法将客户端请求的签名与节点生成的_signature进行比较。如果一致，表示通过，否则认证失败。具体步骤：

客户端将axios封装在一层中：

从“axios”导入爱可信从" crypto-js/sha256 "导入sha256从" crypto-js/enc-Base64"//导入Base64加密算法，需安装crypto-js函数crypto(str){ const _ sign=sha 256(str)返回encodeURIComponent(base64。stringify(_ sign))} const SECRET=process。环境。SECRET const options={ header s : { ' X-Requested-With ' : ' XMLHttpRequest ' }，timeout: 30000，base URLs : '/API ' }//服务器端需要一个完整的统一资源定位器来工作if(过程).对爱可信的每一个请求都做一个处理，携带上签名和timestampinstance。拦截器。请求。使用(配置={常量时间戳=新日期().getTime()const param=` timestamp=$ { timestamp } SECRET=$ { SECRET } ` const sign=crypto(param)config . params=object。分配({ }，配置。参数，{时间戳，符号})返回配置})导出默认实例接着，在计算机网络服务器端写一个鉴权的中间件，/服务器/中间件/verify.js:

const sha 256=require(' crypto-js/sha 256 ')const Base 64=require(' crypto-js/enc-Base 64 ')函数crypto(str){ const _ sign=sha 256(str)返回encodeURIComponent(Base64。stringify(_ sign))}//使用和客户端相同的一个秘钥const SECRET=进程。环境。secretfunction verify中间件(req，res，next) { const { sign，timestamp }=req.query //加密算法与请求时的一致const _ sign=crypto(` timestamp=$ { timestamp } SECRET=$ { SECRET } `)if(_ sign===sign){ next()} else { RES . status(401).发送({ message: '无效的令牌' })} }模块，导出={ verifymedings }最后，在需要鉴权的路由中引用这个中间件，/server/index.js:

const { Router }=require(' express ')const { verify middleware }=require('./中间件/验证。js ')常量Router=Router()//在需要鉴权的路由加上router.get('/test '，verifyMiddleware，function (req，res，next){ RES . JSON({ name : ' test ' })})静态文件的处理

根目录下有个/静态文件夹，我们希望这里面的文件可以直接通过全球资源定位器(统一资源定位符)访问，需要在/server/index.js中加入一句：

const express=require(' express ')const app=express()app。使用('/static '，express.static('static ')四、Nuxt开发相关生命周期

Nuxt扩展了某视频剪辑软件的生命周期，大概如下：

导出默认的{中间件(){},//服务端validate () {}，//服务端asyncData () {}，//服务端fetch () {}，//store数据加载beforeCreate () { //服务端和客户端都会执行},已创建(){ //服务端和客户端都会执行}，beforeMount () {}，mounted () {} //客户端}asyncData

该方法是Nuxt最大的一个卖点，服务端渲染的能力就在这里，首次渲染时务必使用该方法异步数据。会传进一个语境参数，通过该参数可以获得一些信息，如：

导出默认{ asyncData (ctx) { ctx.app //根实例ctx.route //路由实例ctx.params /路由参数ctx.query //路由问号后面的参数ctx.error //错误处理方法}}渲染出错和创建交互式、快速动态网页应用的网页开发技术请求出错的处理

asyncData渲染出错

使用asyncData钩子时可能会由于服务器错误或美国石油学会(美国石油协会)错误导致无法渲染，此时页面还未渲染出来，需要针对这种情况做一些处理，当遇到asyncData错误时，跳转到错误页面，nuxt提供了上下文错误方法用于错误处理，在asyncData中调用该方法即可跳转到错误页面。

导出默认{异步异步数据(ctx) { //尽量使用试着接住的写法，将所有异常都捕捉到尝试{抛出新的错误()}捕捉{ CTX。错误({ statuscode : 500，message: '服务器开小差了~' }) } }}这样，当出现异常时会跳转到默认的错误页，错误页面可以通过/layout/error.vue自定义。

这里会有问题。context.error的参数必须类似{statusCode : 500，message : ' server await ~ ' }，statusCode必须是http状态码，我们的服务器返回的错误往往还有一些其他的自定义码。例如{resultcode: 10005，resultinfo: '服务器内部错误' }，有必要转换返回的api错误。

为了方便起见，我引入了/plugins/ctx-inject.js来注册一个上下文的全局错误处理方法：context。$errorHandler(错误)。注入方法请参考：注入$root和上下文，CTX-inject.js:

//注册全局错误处理事件导出默认值(CTX，注入)={CTX。$ error handler=err={ try { context RES=err。data if(RES){//由于nuxt的错误页只能识别http的statusCode，所以状态码统一传输到500，表示服务器异常。ctx.error({ statusCode: 500，message: RES . resultinfo })} else { CTX . error({ statuscode : 500，Message: '服务器遗弃~'})} } catch { CTX . error({ statuscode 3360 500，message : '服务器遗弃~ ' })})然后使用插件nuxt.config.js:

export default { plugins :[' ~/plugins/CTX-inject . js ']}注入后，我们可以在asyncData中使用它：

导出默认的{异步数据(CTX){//尝试使用try catch捕获所有异常以尝试{抛出新错误()}捕获(err) {CTX。$ error handler (err)}}} Ajax请求错误

对于ajax异常，页面此时已经呈现。当出现错误时，您不必跳转到错误页面，但您可以使用它。$ toast.error (res.message) toast。

装载方法

Nuxt在页面顶部内置了加载进度条，建议提供跳页体验。打开：这个。$nuxt。$loading.start () finish: this。$nuxt。$loading.finish()

包部署

一般来说，在部署之前，可以在本地打包，在本地运行，然后上传到服务器进行部署。命令：

//打包npm运行build//运行npm本地启动，将除node_modules以外的其他文件上传到服务器，git和。env，然后通过pm2管理它们。pm2.json可以在项目的根目录中创建，以便于维护：

{“name”:“nuxt-test”，“script”:/server/index.js '，' instances ' : 2，' CWD' : '}然后配置生产环境的环境变量，一般由直接配置。环境产品：cp。如果您是第一次部署或有新的依赖包，则需要在服务器上安装一次NPM，然后可以使用pm2:

//运行pm2 start。项目根目录下的/pm2.json。如有必要，您可以在引导后自动设置PM23360pm2save PM2startup。应该注意的是，每次部署都必须重新启动过程： pm2 reload nuxt-test。

动词（verb的缩写）最后

Nuxt.js引入了Node，而nuxt.config.js则替代了main.js的一些功能，目录结构与vue项目略有不同，增加了很多约定，对于第一次接触的同学来说可能会很陌生。

演示源代码：凤仙旗/前端-demos/src/nuxt-test。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。