nuxt解决首屏加载慢问题_Nuxt开发经验分享，让你踩少点坑

背景：为什么使用nuxt.js?

vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题。

1. 由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。
2. 由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。
3. Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。

除此之外，nuxt与vue还有一些其他方面的区别。

1. 路由
2. nuxt按照 pages 文件夹的目录结构自动生成路由
3. vue需在 src/router/index.js 手动配置路由
4. 入口页面
5. nuxt页面入口为 layouts/default.vue
6. vue页面入口为 src/App.vue
7. webpack配置
8. nuxt内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置
9. vue关于webpack的配置存放在build文件夹下
10. nuxtjs目录解构描述：

实战经验：

一、nuxt.config.js配置

1.viewport设置：width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0；

2.设置公共要样式：css:['~style/base.css'];

3.插件引入：plugins: [{src: '~plugins/lotusApiUrl.js', ssr: false}]，ssr为false是不在服务端执行，插件调用只能在mounted生命周期；

二、package.json

1.git代码提交采用了eslint校验导致提交代码失败，去除"husky": {

"hooks": {

"pre-commit": "lint-staged"

}

}

即可；

2.开发环境项目通过ip预览，需要增加配置"config": {

"nuxt": {

"host": "10.10.8.66