之前的Vue项目利用过prerender-spa-plugin&vue-meta-info做seo，但对付博客类、***类的网站，详情页还是无法被爬取到，只能做固定的页面，本日把自己的Vue项目改造成Nuxt项目。
效果预览：https://www.lpya.cn/
1、首先利用以下命令安装nuxt项目
npx create-nuxt-app demo
安装时会涌现类似Vue安装时涌现的选项，自己根据需求选择就好
选项
2、利用下面命令安装依赖并启动项目，涌现下面的就解释nuxt安装成功
cnpm installnpm run dev
效果图
3、项目构造比拟Vue项目，两个目录构造很相似，无非Vue是在src目录下，Nuxt是在根目录
Vue与Nuxt构造比拟
二、如何修正1、main.js
把Vue里面的main.js文件放到Nuxt根目录下，去掉new Vue({})，并在nuxt.config.js文件引入，其它不变
//main.js文件import Vue from 'vue'import bus from "@/assets/bus/bus"Vue.prototype.$bus = bus;import VueCookies from 'vue-cookies'Vue.use(VueCookies)import mavonEditor from "mavon-editor";Vue.use(mavonEditor)Vue.prototype.$host = "https://www.lpya.cn"// new Vue({// render: h => h(App),// }).$mount('#app')//nuxt.config.jsexport default {... plugins: [ "@/main",//引入main.js，其它js文件基本上是在这里引入 ],}
2、store.js文件
在store目录下创建index.js文件，引入后在页面直接this.$store调用
//index.jsexport const state = () => ({ isHeader: false,})const mutations = { isHeader(state, val) { state.isHeader = val; },}export default { state, mutations}//nuxt.config.jsexport default {... plugins: [ "@/store/index",//引入store ],}
3、组件
1）把Vue components目录下的全部放到Nuxt components目录下就行，Nuxt的组件会自动注册，可以不该用import注册直策应用
2）把组件复制过来后，可能会涌现scss的缺点（我Vue项目利用的是SCSS），利用下面命令安装
npm install --save-dev node-sass sass-loader @nuxtjs/style-resources
配置SCSS的全局变量
//nuxt.config.jsexport default {... css: [ '@/assets/scss/common.scss',//一样平常的可以放到这里 ], styleResources: { scss: '~assets/scss/app.scss', }, modules: [ '@nuxtjs/style-resources', ],}
4、路由
把Vue views目录下的全部放到Nuxt pages目录下，文件名便是路由，值得把稳的是，传参的时候和Vue有一些不同。比如我博客网站文章详情的路由是/detail，要传一个id过去，跳转链接可以写成下面这样
<nuxt-link :to="{ name: 'detail-id', params: { id: articleId } }">现有的Vue项目改造成Nuxt项目并做SEO优化</nuxt-link>
路由
5、布局
Nuxt可以自定义多个布局，比如说一个布局须要Header和Footer，一个布局不须要，另一个须要空缺，我们可以在layouts定义布局，并在pages页面下调用即可
export default { layout: function () {//index1是在layouts目录下创建的文件名，记得加上<Nuxt /> return "index1"; },}
6、设置网站title
利用head()给每个页面设置title和description
export default { head() { return { title: "网页设计，模板分享，源码*** - 糊涂博客", meta: [ { hid: "keywords", name: "keywords", content: "个人博客,网页设计,微信小程序,seo优化,源码***,模板分享", }, { hid: "description", name: "description", content: "糊涂个人博客，一位编程爱好者的发展地。专注于前后真个学习，不定期更新分享踩坑过程，学习记录、网页模板、demo源码等，也希望借此能够认识更多的朋友。", }, ], }; },}三、SEO优化
配置到这里，Vue项目基本上已经改造成Nuxt项目，但是和Vue的差异不大，详情页面还是无法被爬取到，这里我们须要利用asyncData，它可以在初始化页面前先得到数据，然后设置title。其它浸染可以自己查。。。
//详情页面import { articleDetail } from "@/assets/api/api";export default { asyncData({ app, params }, callback) { return articleDetail(params.id).then((res) => { const { code, data } = res; if (code === 1) { app.head.title =data.title; const meta = [ { charset: "utf-8", }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { hid: "keywords", name: "keywords", content:data.keywords, }, { hid: "description", name: "description", content: data.content, }, ]; app.head.meta = meta; } callback(null, {}); }); },}四、项目支配
1、利用下面命令打包项目，会创建.nuxt目录，把下面文件放到做事器上
npm run build
须要支配的文件
2、利用下面命令安装依赖并运行
cnpm installnpm run start
运行
3、配置域名访问，我利用的是bt面板，找到配置文件在里面添加下面内容，利用域名就可以访问刚支配的内容了
upstream lpya { server 0.0.0.0:7000;}server{ location / { proxy_pass http://lpya; proxy_set_header Origin ''; index index.html index.htm;}}
4、如果我们关闭终端，做事就关闭了，现在须要开户守护进程，让它在后台一贯运行，创建pm2.config.json文件
{ "apps": { "name": "sever", "script": "npm run start", "ignore_watch": [ "node_modules" ] }}//然后运行//pm2 start pm2.config.json启动//pm2 stop pm2.config.json关闭五、爬取效果
利用bd站长工具的抓取诊断，可以查看做之前和之后的一个比拟。下图可以明显看出，没改之前只能抓取到固定的信息，改之后可以动态抓取到内容（重点是利用了asyncData）
前后比拟
六、sitemap.xml网站舆图Sitemap可以方便我们见告搜索引擎网站上有哪些可供抓取的网页。
1、利用命令安装@nuxtjs/sitemap
npm install @nuxtjs/sitemap
2、创建config目录，并在里面添加sitemap.js文件
//sitemap.jsimport axios from 'axios'const sitemap = { path: '/sitemap.xml', hostname: 'https://www.lpya.cn/', cacheTime: 1000 60 60 24, gzip: true, generate: false, exclude: [ '/404' ], defaults: { changefreq: 'daily', lastmod: new Date() }, routes: async () => { const getUrl = `https://www.lpya.cn/article/get` let res = await axios.post(getUrl) let { data } = res.data let routes = [{ url: "/", changefreq: "daily", lastmod: new Date() }] if (data.length !== 0) {//拼接 let arr = data.map(item => ({ url: "/detail/" + item.id, lastmod: item.created_at, changefreq: "daily" })) routes.push(...arr) } return routes }}export default sitemap
3、在nuxt.config.js引入，支配时记得把config目录也上传做事器
//nuxt.config.jsimport sitemap from "./config/sitemap"export default {... modules: [ '@nuxtjs/style-resources', ], sitemap: sitemap,//调用}
4、支配后访问https://.../sitemap.xml链接就可以查看效果
sitemap
七、总结虽然看起来多，实际也就几步操作，我也是第一次打仗nuxt，有些地方可能弄不好或许也有更好的方法，有大神知道的可以吱一声[灵光一闪]。。。有须要的可以自己逐步考试测验，bug总会被办理的（或许[堕泪]）。
