每天前进一点点...
之前的Vue项目利用过prerender-spa-plugin&vue-meta-info做seo，但关于博客类、新闻类的网站，详情页仍是无法被爬取到，只能做固定的页面，今天把本身的Vue项目革新成Nuxt项目。
效果预览：https://www.lpya.cn/
一、前期筹办1、起首利用以下号令安拆nuxt项目
npxcreate-nuxt-app demo安拆时会呈现类似Vue安拆时呈现的选项，本身按照需求选择就好
选项
2、利用下面号令安拆依赖并启动项目，呈现下面的就申明nuxt安拆胜利
cnpminstallnpmrun dev效果图
3、项目构造比照Vue项目，两个目次构造很类似，无非Vue是在src目次下，Nuxt是在根目次
Vue与Nuxt构造比照
二、若何修改1、main.js
把Vue里面的main.js文件放到Nuxt根目次下，去掉new Vue({})，并在nuxt.config.js文件引入，其它稳定
//main.js文件importVuefromvueimportbusfrom"@/assets/bus/bus"Vue.prototype.$bus = bus;importVueCookiesfromvue-cookiesVue.use(VueCookies)importmavonEditorfrom"mavon-editor";Vue.use(mavonEditor)Vue.prototype.$host ="https://www.lpya.cn"// new Vue({// render: h => h(App),// }).$mount(app)//nuxt.config.jsexportdefault{...plugins: ["@/main",//引入main.js，其它js文件根本上是在那里引入],}2、store.js文件
在store目次下创建index.js文件，引入后在页面间接this.$store挪用
//index.jsexportconststate =()=>({isHeader:false,})constmutations = {isHeader(state, val) {state.isHeader = val;},}exportdefault{state,mutations}//nuxt.config.jsexportdefault{...plugins: ["@/store/index",//引入store],}3、组件
1）把Vue components目次下的全数放到Nuxt components目次下就行，Nuxt的组件会主动注册，能够不利用import注册间接利用
2）把组件复造过来后，可能会呈现scss的错误（我Vue项目利用的是SCSS），利用下面号令安拆
npminstall --save-dev node-sass sass-loader @nuxtjs/style-resources设置装备摆设SCSS的全局变量
//nuxt.config.jsexportdefault{...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页面下挪用即可
exportdefault{layout:function(){//index1是在layouts目次下创建的文件名，记得加上return"index1";},}6、设置网站title
利用head()给每个页面设置title和description
exportdefault{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";exportdefault{asyncData({ app, params }, callback) {returnarticleDetail(params.id).then((res) => {const{ code,data} = res;if(code ===1) {app.head.title =data.title;constmeta = [{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目次，把下面文件放到办事器上
npmrun build需要摆设的文件
2、利用下面号令安拆依赖并运行
cnpminstallnpmrun start运行
3、设置装备摆设域名拜候，我利用的是bt面板，找到设置装备摆设文件在里面添加下面内容，利用域名就能够拜候刚摆设的内容了
upstreamlpya {server0.0.0.0:7000;}server{location/ {proxy_passhttp://lpya;proxy_set_headerOrigin;indexindex.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
npminstall @nuxtjs/sitemap2、创建config目次，并在里面添加sitemap.js文件
//sitemap.jsimportaxiosfromaxiosconstsitemap = {path:/sitemap.xml,hostname:https://www.lpya.cn/,cacheTime:1000*60*60*24,gzip:true,generate:false,exclude: [/404],defaults: {changefreq:daily,lastmod:newDate()},routes:async() => {constgetUrl =`https://www.lpya.cn/article/get`letres =awaitaxios.post(getUrl)let{data} = res.dataletroutes = [{url:"/",changefreq:"daily",lastmod:newDate()}]if(data.length !==0) {//拼接letarr = data.map(item=>({url:"/detail/"+ item.id,lastmod: item.created_at,changefreq:"daily"}))routes.push(...arr)}returnroutes}}exportdefaultsitemap3、在nuxt.config.js引入，摆设时记得把config目次也上传办事器
//nuxt.config.jsimportsitemapfrom"./config/sitemap"exportdefault{...modules: [@nuxtjs/style-resources,],sitemap: sitemap,//挪用}4、摆设后拜候https://.../sitemap.xml链接就能够查看效果
sitemap
七、总结固然看起来多，现实也就几步操做，我也是第一次接触nuxt，有些处所可能弄欠好或许也有更好的办法，有大神晓得的能够吱一声。。。有需要的能够本身渐渐测验考试，bug总会被处理的（或许）。
评论列表