nuxt的基本使用和一些需要知道的小坑

简介 用vue开发的人基本都知道，vue对seo很不友好，爬虫爬不到网站中的文章内容，只能够收录网站首页，为了有效解决这个问题，有四种方法：1.SSR服务器渲染；2.静态化；3.预渲染prerender-spa-plugin；4.使用Phantomjs针对爬虫做处理。本文介绍的是SSR服务器渲染。

1. 安装步骤

npx create-nuxt-app <项目名> 根据提示选择安装内容即可 nuxt模式默认选择universal npm run dev 启动项目

2. 目录结构

assets —资源目录 layouts —布局目录 middleware —中间件目录 plugins —插件目录 static —静态(后台)

3.异步数据 SSR解析

页面数据 asyncData 先请求 扔个模板结构(静态渲染) asyncData(请求拿数据) 把编译的结果扔给客户端 服务器下发一个script 挂载到window下 同步到浏览器(交互) 虚拟编译和服务器扔过来的作对比, 不同重新请求 第一参数: 当前页面的上下文对象

async asyncData({params}) {
    return axios({
	url: '请求',
	method: 'post',
	data: '参数'
    }).then(res => {
	return {
          list: res.data.article,
          total: res.data.total
        }  
    })
}

4.参数的接收方式

用来唯一标识资源的参数写到路由上，比如：/goods/:id 搜索、排序、翻页等的参数，比如：/goods/?limit=xx&page=xx

8cf1b026a1fce404cd12599fad59388.png

5.打包资源

npm run dev 支持热更新，开发模式启动服务器 npm run build 网站上线前打包 npm run start 生产环境启动服务器 npm run generate 静态化打包