NuxtJS搭建SSR应用，挺好~最近，笔者负责的微信小程序tab页需要直接做成webview，方便后续添加活动以及发布

最近，笔者负责的微信小程序tab页需要直接做成webview，方便后续添加活动以及发布上线。然后笔者就在之前已有的H5应用（SPA应用）上开发了一个活动页。但是发现，当用户切换小程序原生tab页到H5tab页的时候，白屏时间较长，打开较慢，于是就想着手开发一个SSR应用，结果发现，嗯，真香！

废话不多说，先看结果：

这是原来的spa应用页面首屏加载耗时

这是基于nuxtJS搭建的SSR应用页面首屏加载耗时

提升还是很明显的，SEO的优势先不考虑了，主要就是为了首屏打开快，减少白屏时间。特别是对于一些活动页，以后都放到spa应用上，用户体验会提升很多。

下面开始讲一下笔者如何搭建的。

1、首页先依照官网安装流程，使用npx create-nuxt-app搭建最初的基础应用。

npx create-nuxt-app nuxt-demo

生成简单的目录建构：

2、有了基础构建后，开始搞CSS相关：

1、添加css预处理（sass)

npm install -D node-sass sass-loader

注意，这里要安装兼容的版本，否则会不生效，笔者安装的是"node-sass": "^6.0.1","sass-loader": "^10.2.0"

然后就可以在vue页面写sass了

2、由于是移动端H5，所以需要安装postcss插件。

npm install -D postcss-px-to-viewport-8-plugin

为什么选择这个插件，而没有选择postcss-px-to-viewport插件，是因为笔者用的vant的UI库，vant默认是375的设计稿尺寸，而笔者公司的设计稿尺寸是750。所以需要动态转换viewport。但是postcss-px-to-viewport的viewportWidth配置不支持传入function。所以引用了postcss-px-to-viewport-8-plugin插件。

CSS预处理完后，需要配置路由路径

笔者应用的子路径是urptssr，这时候需要在nuxt.config.js文件的router中配置base字段：

然后是axios简单封装，新建utils目录，添加request.js。这里可以根据用户自定义统一拦截添加请求token以及统一的响应code处理等。

//utils/request.js
import axios from 'axios'
import qs from 'qs'
import config from './config'

config.baseURL = '/urptssr'

const service = axios.create(config)

// POST 传参序列化
service.interceptors.request.use(
    (config) => {
        if (config.method === 'get' && !!config.data) {
            // get 方法的时候，拼接字符串
            config.url = config.url + '?' + qs.stringify(config.data)
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)
// 返回状态判断
service.interceptors.response.use(
    (res) => {
        return res.data
    },
    (error) => {
        return Promise.reject(error)
    }
)

export default service

NuxtJS搭建SSR应用，挺好~