本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理。
首先,我们简单了解下Nuxtjs框架,Nuxt.js是一个基于Vue的通用框架,主要用于解决Vue项目的服务端渲染(SSR)。
它本质上是一个Vue框架,增加一层node服务,通过对客户端/服务端的抽象封装,使用Nuxt各种资源配置,处理服务端渲染。
除了服务端渲染以外,Nuxtjs还提供生成静态化站点的能力。
当我们需要进行SSR服务端渲染处理,使用Nuxtjs的时候,为了避免各种库的版本兼容等问题,建议使用官方提供的 create-nuxt-app
新建一个标准的nuxtjs项目,然后再将原有Vue项目代码迁移过来。
创建一个新的Nuxtjs项目:
npx create-nuxt-app <项目名> # 或 yarn create nuxt-app <项目名>
创建好新的Nuxtjs项目后,补充项目目录结构,大致如下:
标注了基本结构,不一定所有结构都会用到,根据项目的不同情况进行使用。
Nuxtjs项目创建完成,建立好相应的目录结构以后,就可以把对应Vue项目里的代码迁移到Nuxtjs项目中。
大部分的页面和组件都比较好迁移,直接复制拷贝就可以,但如果涉及到路由和状态管理,需要特别处理,在介绍之前先看下Nuxtjs的配置文件。
先看下nuxt.config.js文件的基本结构,如下代码:
export default { target: '', srcDir: '', head: { title: '', htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, { name: 'format-detection', content: 'telephone=no' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, css: [], plugins: [], components: true, buildModules: [], modules: [], build: {} }
各个配置项对应不同的功能:
server
(服务端渲染)和 static
(静态化站点)src
下,这里就配置 ./src
assets/style/reset.less
@nuxtjs/axios
、@nuxtjs/router
等关于路由,正常情况下,Nuxtjs会依据页面目录(pages)结构自动生成路由配置。
但如果需要在项目中自定义添加较复杂的路由,可以使用 @nuxtjs/router
模块进行处理:
npm install @nuxtjs/router
。modules: ['@nuxtjs/router']
。router.js
,用于处理路由。关于状态管理,可以直接在根目录结构下使用store目录,Nuxtjs会自动找到store目录,并引用 Vuex
模块,构建整个项目的状态管理。
这个过程和单独的Vue项目大致一样,只不过不用在代码里引入store文件,其他使用方式也一样:
import { mapGetters, createNamespacedHelpers } from 'vuex' const { mapMutations } = createNamespacedHelpers('config') export default { computed: { ...mapGetters([ 'isHad' ]) }, methods: { ...mapMutations([ 'setConfig', 'initConfig' ]) } }
也可以使用 $store
进行操作:
this.$store.dispatch('config/setConfig', {})
接下来,看下package.json的命令脚本,Nuxtjs常用的scripts命令语句:
"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }
其中,npm run build
用于服务端渲染;npm run generate
用于静态化站点。
基于此,在这里解释下这些语句,简单看看每些语句执行后,做了什么:
npm run dev
单独执行,会生成根目录下的 .nuxt
目录,但该目录下不包括 dist
目录npm run build
也会生成根目录下的 .nuxt
目录,该目录包含 dist
、dist\client
、dist\server
npm run generate
target: 'static'
, 则只会生成根目录下的 dist
目录,包含所有静态资源target
, 则除了会生成根目录下的 .nuxt
目录(包含 dist
、dist\client
、dist\server
),还生成根目录下的dist
目录(包含静态资源)npm run start
需要搭配 build
、 generate
命令一起使用:
build
再执行 start
,则使用 .nuxt
目录的内容,target
被设置成server
generate
再执行 start
,则使用 dist
目录的内容nuxt.config.js
配置中的 target: 'static'
,则 start
必须和 generate
一起使用Nuxtjs存在两个环境,一个用于运行服务端,一个用于运行客户端,通过环境变量可以进行区分。
下面,看下Nuxtjs中的 process
几个环境变量:
npm run generate
生成,为true则是,为false则否如果 nuxt.config.js 中的
target: 'static'
,则npm run dev
、npm run build
、npm run generate
中的process.static
都是true
。
process.client/process.server
是在执行打包命令的时候进行转换的,这个时候会把服务端和客户端的代码分开打包,服务端的代码在node环境中执行,客户端的代码一般在浏览器中执行。
它们的存在,对我们处理一些问题很有用,如只能在客户端环境下执行的代码要做区分(window、document等):
if (process.client) { document.addEventListener('click', (e) => {}) window.addEventListener('resize', () => {}, false) }
如上代码,当使用了 process.client
进行判断后,这部分代码将只会打包在客户端,就不会出现找不到对象的错误了。
有了以上关于Nuxtjs的介绍,特别是脚本命令,我们就能很容易搞定Nuxtjs的部署了。
Nuxtjs在部署上有三种方式:服务端渲染部署、静态化站点部署、单页面应用部署。
设置nuxt.config.js:
target: 'server'
执行打包命令:
npm run build
执行命令后,将会在根目录下生成一个 .nuxt
的目录。
当我们要在服务器上进行部署的时候,需要将Nuxtjs项目下的 .nuxt目录、static目录、nuxt.config.js、package.json 四个资源拷贝到服务器上。
在服务器上直接启动,则执行以下命令:
# 安装包: npm run install # 启动: npm run start
如果用PM2来启动,也是先安装包:npm run install
。
然后,可以新建一个PM2的启动配置文件 ecosystem.json
:
{ "app": [{ "name": "appWeb", "script": "./node_modules/nuxt/bin/nuxt.js" }] }
配置好 script
启动脚本,直接启动即可:
pm2 start ecosystem.json
设置nuxt.config.js:
target: 'static'
执行打包命令:
npm run generate
生成的静态文件位于根目录的 dist
目录(默认)下,直接将该文件拷贝web服务器上即可。
生成静态文件时,会把pages下的每个页面都生成一个对应的html页面,但如果遇到该html页面上的js无效的情况,需要特殊处理。
我在处理nuxtjs项目,进行静态化导出的时候就碰到了JS无法执行的问题,最后使用在 layouts
布局页面中进行页面处理才解决问题,具体如下:
layouts
布局页面获取路由path值:toPath: this.$route.path
;import page1 from '../pages/page1' import page2 from '../pages/page2'
<div class="layouts"> <pp-header/> <page1 v-if="toPath.includes('page1')"/> <page1 v-if="toPath.includes('page1')"/> <pp-footer/> </div>
通过路由字符串判断,获取当前路由信息,使用组件的方式加载对应的页面。
这样处理后,在使用 npm run generate
进行静态化打包时,也会把对应页面的内容替换进去。
最后生成html页面,浏览器打开后JS都能执行。
而直接使用
<nuxt/>
虽然页面内容效果一样,但JS却无法执行。
设置nuxt.config.js:
mode: 'spa'
执行打包命令:
npm run build
这时候会自动生成dist文件夹目录,部署到服务器上即可。