摘要:SEO优化源代码(SEO源码)_娄底seo培训每天进步一点点...之前的Vue项目使用过prerender-spa-plugin&vue-meta-info做seoSEO优化源代码,但对于博客和新闻网站SEO优化源代码,细节页面无法爬取SEO优化源代码,今天只能做固定页面Vue项目改造成Nuxt项目。效果预览:一
SEO优化源代码(SEO源码)_娄底seo培训
每天进步一点点...
之前的Vue项目使用过prerender-spa-plugin&vue-meta-info做seoSEO优化源代码,但对于博客和新闻网站SEO优化源代码,细节页面无法爬取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
np m install @nuxtjs/sitemap2、创建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 sitemap3、在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总会被解决的(或许[流泪])。
本文内容主要是有关于::SEO优化源代码(SEO源码)和[娄底seo培训]
如果您有想法通过seo排名。来获得精准流量。请添加客服咨询我们。专业的团队+AI智能让您没有后顾之忧。