Nuxt.js实战和配置详解

前段时间刚好公司有项目使用了Nuxt.js来搭建,而刚好在公司内部做了个分享,稍微再整理一下发出来。本文比较适合初用Nuxt.js的同学,主要讲下搭建过程中做的一些配置。建议初次使用Nuxt.js的同学先过一遍官方文档,再回头看下我这篇文章。

一、为什么要用Nuxt.js

原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题。

二、Nuxt.js和纯Vue项目的简单对比

 1. build后目标产物不同

vue: dist

nuxt: .nuxt

2. 网页渲染流程

vue: 客户端渲染,先下载js后,通过ajax来渲染页面;

nuxt: 服务端渲染,可以做到服务端拼接好html后直接返回,首屏可以做到无需发起ajax请求;

3. 部署流程

vue: 只需部署dist目录到服务器,没有服务端,需要用nginx等做Web服务器;

nuxt: 需要部署几乎所有文件到服务器(除node_modules,.git),自带服务端,需要pm2管理(部署时需要reload pm2),若要求用域名,则需要nginx做代理。

4. 项目入口

vue: /src/main.js ,在main.js可以做一些全局注册的初始化工作; nuxt: 没有main.js入口文件,项目初始化的操作需要通过 nuxt.config.js 进行配置指定。

三、从零搭建一个Nuxt.js项目并配置 新建一个项目

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

npx create-nuxt-app <项目名>

Nuxt.js实战和配置详解

大概选上面这些选项。

值得一说的是,关于 Choose custom server framework (选择服务端框架),可以根据你的业务情况选择一个服务端框架,常见的就是Express、Koa,默认是None,即Nuxt默认服务器,我这里选了 Express 。

选择默认的Nuxt服务器,不会生成 server 文件夹,所有服务端渲染的操作都是Nuxt帮你完成,无需关心服务端的细节,开发体验更接近Vue项目,缺点是无法做一些服务端定制化的操作。

选择其他的服务端框架,比如 Express ,会生成 server 文件夹,帮你搭建一个基本的Node服务端环境,可以在里面做一些node端的操作。比如我公司业务需要(解析protobuf)使用了 Express ,对真正的服务端api做一层转发,在node端解析protobuf后,返回json数据给客户端。

还有 Choose Nuxt.js modules (选择nuxt.js的模块),可以选 axios 和 PWA ,如果选了axios,则会帮你在nuxt实例下注册 $axios ,让你可以在.vue文件中直接 this.$axios 发起请求。

开启eslint检查

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

build: { extend (config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } }

这样开发时保存文件就可以检查语法了。nuxt默认使用的规则是 @nuxtjs (底层来自eslint-config-standard ),规则配置在 /.eslintrc.js :

module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: 'babel-eslint' }, extends: [ '@nuxtjs', // 该规则对应这个依赖: @nuxtjs/eslint-config 'plugin:nuxt/recommended' ], // add your custom rules here rules: { 'nuxt/no-cjs-in-config': 'off' } }

如果不习惯用 standard 规则的团队可以将 @nuxtjs 改成其他的。

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

在node端,我们喜欢使用 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.env.APIHOST) //

此时我们只是让服务端可以使用 .env 的文件而已,Nuxt客户端并不能使用 .env ,按Nuxt.js文档所说,可以将客户端的环境变量放置在 nuxt.config.js 中:

module.exports = { env: { baseUrl: process.env.BASE_URL || 'http://localhost:3000' } }

但如果node端和客户端需要使用同一个环境变量时(后面讲到API鉴权时会使用同一个SECRET变量),就需要同时在 nuxt.config.js 和 .env 维护这个字段,比较麻烦,我们更希望环境变量只需要在一个地方维护,所以为了解决这个问题,我找到了 @nuxtjs/dotenv 这个依赖,它使得nuxt的客户端也可以直接使用 .env ,达到了我们的预期。

安装:

npm i @nuxtjs/dotenv

客户端也是通过 process.env.XXX 来使用,不再举例啦。

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3358c74cf593b01729fbd91d2c1cdba7.html