现有的Vue项目改造成Nuxt项目并做SEO优化

现有的Vue项目改造成Nuxt
摘要:每天进步一点点... 之前的Vue项目使用过prerender-spa-plugin&vue-meta-info做seo,但对于博客类、新闻类的网站,详情页还是无法被爬取到,只能做固定的页面,今天把自己的Vue项目改造成Nuxt项目。 一、前期准备 1、首先使用以下命令安装nuxt项目 ```js npx create-nuxt-app demo ``` 安装时会出现类似Vue安装时出现的选项,自己根据需求选择就好 ![1.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/ca866ee930632caf11d082c3d90a7d98.png) 2、使用下面命令安装依赖并启动项目,出现下面的就说明nuxt安装成功 ```js cnpm install npm run dev ``` ![2.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/ae0781ed8866f2d1d05bb1479edfb5a4.png) 3、项目结构对比Vue项目,两个目录结构很相似,无非Vue是在src目录下,Nuxt是在根目录 ![3.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/e6a882785d63f103ab075defdaae6291.png) 二、如何修改 **1、main.js** 把Vue里面的main.js文件放到Nuxt根目录下,去掉new Vue({}),并在nuxt.config.js文件引入,其它不变 ```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.js export default { ... plugins: [ "@/main",//引入main.js,其它js文件基本上是在这里引入 ], } ``` **2、store.js文件** 在store目录下创建index.js文件,引入后在页面直接this.$store调用 ```js //index.js export const state = () => ({ isHeader: false, }) const mutations = { isHeader(state, val) { state.isHeader = val; }, } export default { state, mutations } //nuxt.config.js export default { ... plugins: [ "@/store/index",//引入store ], } ``` **3、组件** 1)把Vue components目录下的全部放到Nuxt components目录下就行,Nuxt的组件会自动注册,可以不使用import注册直接使用 2)把组件复制过来后,可能会出现scss的错误(我Vue项目使用的是SCSS),使用下面命令安装 ```js npm install --save-dev node-sass sass-loader @nuxtjs/style-resources ``` 配置SCSS的全局变量 ```js //nuxt.config.js export default { ... css: [ '@/assets/scss/common.scss',//一般的可以放到这里 ], styleResources: { scss: '~assets/scss/app.scss', }, modules: [ '@nuxtjs/style-resources', ], } ``` **4、路由** 把Vue views目录下的全部放到Nuxt pages目录下,文件名就是路由,值得注意的是,传参的时候和Vue有一些不同。比如我博客网站文章详情的路由是/detail,要传一个id过去,跳转链接可以写成下面这样 ```js <nuxt-link :to="{ name: 'detail-id', params: { id: articleId } }"> 现有的Vue项目改造成Nuxt项目并做SEO优化 </nuxt-link> ``` ![5.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/23a12ead7758755ef535ad141c1d9ecb.png) **5、布局** Nuxt可以自定义多个布局,比如说一个布局需要Header和Footer,一个布局不需要,另一个需要空白,我们可以在layouts定义布局,并在pages页面下调用即可 ```js export default { layout: function () { //index1是在layouts目录下创建的文件名,记得加上<Nuxt /> return "index1"; }, } ``` **6、设置网站title** 使用head()给每个页面设置title和description ```js export default { head() { return { title: "网页设计,模板分享,源码下载 - 糊涂博客", meta: [ { hid: "keywords", name: "keywords", content: "个人博客,网页设计,微信小程序,seo优化,源码下载,模板分享", }, { hid: "description", name: "description", content: "糊涂个人博客,一位编程爱好者的成长地。专注于前后端的学习,不定期更新分享踩坑过程,学习记录、网页模板、demo源码等,也希望借此能够认识更多的朋友。", }, ], }; }, } ``` 三、SEO优化 配置到这里,Vue项目基本上已经改造成Nuxt项目,但是和Vue的区别不大,详情页面还是无法被爬取到,这里我们需要使用asyncData,它可以在初始化页面前先得到数据,然后设置title。其它作用可以自己查。。。 ```js 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目录,把下面文件放到服务器上 ```js npm run build ``` ![7.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/6da298467c86ae78f3664365c4d6a1c0.png) 2、使用下面命令安装依赖并运行 ```js cnpm install npm run start ``` ![8.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/f0a1c16d7609d7de9e023b4ab14bd418.png) 3、配置域名访问,我使用的是bt面板,找到配置文件在里面添加下面内容,使用域名就可以访问刚部署的内容了 ```js 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文件 ```js { "apps": { "name": "sever", "script": "npm run start", "ignore_watch": [ "node_modules" ] } } //然后运行 //pm2 start pm2.config.json启动 //pm2 stop pm2.config.json关闭 ``` 五、爬取效果 使用bd站长工具的抓取诊断,可以查看做之前和之后的一个对比。下图可以明显看出,没改之前只能抓取到固定的信息,改之后可以动态抓取到内容(重点是使用了asyncData) ![9.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/eae73ea8392d71ad71755b9feef97ee1.png) 六、sitemap.xml网站地图 Sitemap可以方便我们告诉搜索引擎网站上有哪些可供抓取的网页。 1、使用命令安装@nuxtjs/sitemap ```js npm install @nuxtjs/sitemap ``` 2、创建config目录,并在里面添加sitemap.js文件 ```js //sitemap.js import 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目录也上传服务器 ```js //nuxt.config.js import sitemap from "./config/sitemap" export default { ... modules: [ '@nuxtjs/style-resources', ], sitemap: sitemap,//调用 } ``` 4、部署后访问https://.../sitemap.xml链接就可以查看效果 ![10.png](https://api.lpya.cn/HtBlog/public/upload/article/20210320/a5ccd87bf58708d32b1a7ee45e69d496.png) 七、总结 虽然看起来多,实际也就几步操作,我也是第一次接触nuxt,有些地方可能弄不好或许也有更好的方法,有大神知道的可以吱一声。。。有需要的可以自己慢慢尝试,bug总会被解决的(或许)。
网站信息
博主: 糊涂
Github: Github
联系邮箱:1048672466@qq.com
在线人数: 0
文章数量: 10
访问总量: 3561