Vue现有项目改造为Nuxt项目
公司项目,最初只为了实现前后端分离式开发,直接选择了vue框架进行开发,然而现在项目基本完成了,发现蜘蛛根本就抓取不到网站数据,搜索引擎搜出来,都是一片空白没有数据,需要对项目做SEO优化。
本人第一次接触SEO的优化,完全是零基础,开启了小白菜的SEO探索之旅,记录一下一路的过程,方便自己回顾与大家的探讨,如有不度之处,还请路过的大神指导一下。
常用SEO优化方式
在查阅了一些资料后,常见的SEO优化有以下两种:
- prerender-spa-plugin客户端预渲染
- ssr服务端渲染
在选择预渲染模式还是服务端渲染的模式时,简单做了个demo进行了一下测试,由于公司项目以检索为主的产品,后期需要蜘蛛抓取的界面太庞大,最终选择用vue提供的nuxt.js框架去改造现有的项目。
简单写一下prerender-spa-plugin客户端预渲染的过程
prerender-spa-plugin客户端预渲染
相关文档可查看:prerender-spa-plugin
安装
直接在vue项目中,通过npm或者yarn进行安装
##### Yarn
$ yarn add prerender-spa-plugin
##### NPM
$ npm i prerender-spa-plugin -S
配置
在webpack.prod.js中配置
顶部引入:
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
在plugins中配置
new PrerenderSPAPlugin({//生成的预渲染html文件存放路径staticDir: path.join(__dirname, '../dist'),//需要预渲染的界面路径(router)routes: ['/', '/index'],//跨域转发配置,预渲染时获取数据的api地址server: {proxy: {'/api': {target: 'http://192.168.1.223:9002',changeOrigin: true,pathRewrite: {'^/api': '/'}}}},//在一定时间后再捕获页面信息,使得页面数据信息加载完成,必选,不然界面依然会没有数据captureAfterTime: 5000,//忽略打包错误maxAttempts: 10,renderer: new Renderer({//可选,页面在被搜索时的关键词inject: {foo: 'bar'},//可选,无桌面系统可去掉headless: false,//必选,‘render-event'必须与main.js中mounted下的配置名称一致renderAfterDocumentEvent: 'render-event'})
})
在main.js中的配置
new Vue({el: '#app',router,store,template: '<App/>',mounted () {document.dispatchEvent(new Event('render-event'))}
})
config下index.js配置
// build时需要将'/'切换为'./'
assetsPublicPath: './'
到此整个预渲染模式,改造完成了。
此次demo中尚未处理meta信息,需要配置meta信息的,可查看文档vue-meta-info,这是一个基于vue 2.0的插件,它会让你更好的管理你的vue页面里面的meta信息,详细配置过程可参考:muwoo作者写的“处理 Vue 单页面 Meta SEO的另一种思路”文章,里边整个过程写的挺详细的
Nuxt.js框架改造现有Vue项目
作为新手,并不介意自己动手去配置环境,建议直接用nuxt.js提供的脚手架(create-nuxt-app)进行快速搭建项目,具体搭建过程可查看官网文档:Nuxt.js
nuxt.js项目搭建
确保安装了npx(npx在NPM版本5.2.0默认安装了)
$ npx create-nuxt-app <项目名>
或者
$ yarn create nuxt-app <项目名>
之后会有一系列的选项:
在集成的服务器端框架之间进行选择:
- None (Nuxt默认服务器)
- Express
- Koa
- Hapi
- Feathers
- Micro
- Adonis (WIP)
选择您喜欢的UI框架:
- None (无)
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- 选择你想要的Nuxt模式 (Universal or SPA),不懂此选项的可以看一下这篇文章render mode的区别
- 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
- 添加 EsLint 以在保存时代码规范和错误检查您的代码。
- 添加 Prettier 以在保存时格式化/美化您的代码。
官网都有详细的讲解,根据自己的需求选择就好了,当安装完后,项目就可以直接运行了
npm run dev
问题
在启动时遇到如下问题:
找了一圈,发现搭建项目时默认的element-ui版本太低,直接用npm uninstall element-ui
卸载当前版本,重新使用npm install element-ui@版本号
安装即可,版本号使用2.7.2及以上均可
项目目录简介
既然是对现有Vue项目的改造,就先看一下nuxt.js各目录的功能及vue项目目录的对比吧
nuxt.js的目录结构
├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│ └── logo.jpg // 默认logo图片
├── components // 组件。用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件
│ └── AppLogo.vue // 默认logo组件
├── layouts // 布局。页面都需要有一个布局,默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。
│ └── default.vue // 默认模板页面,类似mvc中的layout
├── middleware // 中间件。存放中间件。可以在页面中调用: middleware: 'middlewareName' 。
├── pages // 页面。一个 vue 文件即为一个页面。
│ └── index.vue // 默认首页面
├── plugins // 用于存放JavaScript插件的地方
│ └── element-ui.js // 上边我们安装的UI框架
├── static // 用于存放静态资源文件,比如图片,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
├── store // 用于组织应用的Vuex 状态管理。
├── .editorconfig // 开发工具格式配置
├── .eslintrc.js // ESLint的配置文件,用于检查代码格式
├── .gitignore // 配置git不上传的文件
├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置,比如网站title,已便覆盖默认配置
├── package.json // npm包管理配置文件
└── README.md // 说明文档
nuxt.js目录与vue.js目录的对比
整体来看,目录结构没有太大的变动,区别比较大的就是router文件夹,nuxt.js项目中并没有router路由的配置,这个就是 nuxt 框架的独到之处,为了能实现更好的SSR渲染,它使用的是根据页面结构,自动路由,所以你的文件名,就是你的路由名称,具体规则可查看官网文档路由。
好了,nuxt项目启动了,目录结构也清楚了,接下来就是整个现有Vue项目的迁移了。
迁移项目
目录结构重组
因为之前写习惯了vue项目,并不太想改动目录结构,就简单粗暴的在nuxt目录下新建了一个src目录,将assets、components、layouts、middleware、pages、plugins以及store全部拖到了src中,src继续保持与static同级,这样整个项目结构跟vue没有啥区别了。
最终的项目结构如下如:
PS:在添加了src后需要修改一下项目的启动配置,在nuxt.config.js中修改srcDir为'src/'
已有vue页面迁移
将vue中对应的页面放到现在的nuxt目录下对应的位置,注意一下vue文件的命名就可以
全局配置文件及第三方组件的迁移
vue项目中有用到一些全局配置文件和第三方文件,这部分js的话,直接放在plugins中,以扩展组件的形式在项目启动时,挂载到全局中
1.自定义的配置文件修改
将自定义的变量绑定到vue的原型中,Vue.use注册到vue项目中,在vue文件中可以直接用$config(自定义的变量名)调用该变量,而不需要再单独去import了;最后用export default抛出该变量,是为了在其他js中使用。
PS:只有在vue页面中使用该变量时不需要import,如果要在其他的js中使用,还是需要import进来的。
2.第三方组件的迁移
直接用npm install将第三方组件加载到项目中,在需要的vue界面用import载入就可以,但是需要注意的一点是,第三方组件中可能用到了document、window等浏览器对象,而nuxt项目是需要在客户端和服务端都要进行运行的,服务端并没有window等对象,在服务端运行时会报错,所以第三方组件也跟自定义组件类似的用plugins组件的形式载入比较安全,在plugins下单独创建一个同名的js文件,判定是客户端时再去加载该组件就行了。
plugins中扩展组件的相关配置
在plugins中创建的js需要再项目启动时注册到项目中,也就是在nuxt.config.js中的plugins中进行配置
plugins: [{ src: '@/plugins/config.js', ssr: true },{ src: '@/plugins/d3.js', ssr: true }
]
全局样式文件迁移
全局样式文件css,在nuxt.config.js配置文件中的css中引入
css: ['@/assets/index.css'
]
用户登录状态store的迁移
项目比较着急,实在懒得用nuxt提供的方式再去改造这部分代码,直接沿用了vue中mutations和actions方式,暂时项目并没有出现问题(后期如果有问题再做修改
)
PS:如果该js中用到了window等浏览器的对象,加个process.client去判断就行,其余的可以不用修改
element-ui的迁移
跟vue一样先npm install element-ui --save,之后再plugins下新建一个element-ui.js文件,内容如下:
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'Vue.use(Element, { locale })
然后再nuxt.config.js中进行配置:
plugins: [{ src: '@/plugins/element-ui', ssr: true }
],
css: ['element-ui/lib/theme-chalk/index.css'
]
防止element-ui多次被打包,在nuxt.config.js下的build中进行配置
build: {vendor: ['element-ui']
}
jquery的使用
npm install jquery --save
然后再nuxt.config.js下的build中配置
build: {plugins: [new webpack.ProvidePlugin({'$': 'jquery','jQuery': 'jquery','window.jQuery': 'jquery'})]
}
axios和$axios的使用
因为vue中用了axios,后期也没有修改原来的api请求,所以就继续使用了axios,直接npm install axios --save安装,在需要使用的地方import即可。
如果在vue项目中已经封装了axios,直接可以把vue中写的关于api的js都挪到plugins下,把export default axios抛出,再在nuxt.config.js下按照扩展的配置在plugins中添加就可以正常使用了。
plugins: [{ src: '@/plugins/api/index.js', ssr: true }
],
正常客户端的请求使用axios并没有什么问题,而在asyncData
预加载服务端请求时就比较麻烦了,在asyncData
请求中使用了nuxt默认集成的$axios,这个需要再nuxt.config.js下的modules中配置
modules: ['@nuxtjs/axios','@gauseen/nuxt-proxy'
],
跨域代理配置:
proxyTable: {'/api/': {target: '数据请求的ip地址',ws: false,pathRewrite: {'^/api': '/'}}},
asyncData下数据请求
单个请求:
async asyncData ({ app, params }) {let { data } = await app.$axios.get(url).then(res => {...})
}
多个请求:
async asyncData ({ app, query }) {// 请求带参数时的写法,query指的是当前访问的url中携带的参数let searchQuery = {type: query.searchTag,q: query.searchKeys,page: 1}const [nounList, resultList] = await Promise.all([app.$axios.get('请求的api地址', { params: { q: query.searchKeys }}),app.$axios.get(`/api/search/${searchQuery.type}`, { params: searchQuery })])return {nounList: nounList.data,resultList: resultList.data}}
一般情况下数据请求
this.$axios.get(url).then(res => {...})
PS:整个项目中可以同时使用axios和nuxt默认集成的$axios,可以根据自己的需求合理使用
总结
到现在整个vue项目基本上都改造完了,可以正常使用了。
第一次接触nuxt,对其中的一些原理不是很懂,查阅了大量的文档和别人的博客,虽然完成了这次的改造,但整个项目还是存在一些瑕疵,还在不断的改善中。
细节
- data中数据的初始化定义,不能直接使用location、window等去赋值,也不能用自定义的config配置文件中的变量直接去赋值,也不能直接require图片;这些赋值都可以挪到mounted钩子函数中完成。
不同界面的title等设置,每个vue界面都提供了head钩子函数
head () {return {title: '百度--搜了个啥',meta: [{ hid: 'index', name: 'index', content: 'index page'}]}},
遗留的问题
- static中的html静态文件没法直接访问,查询了很多网站,都没有找到相关的文档,心塞塞中.......
PS:目前整个项目还在持续测试和完善中,后续会将遇到的问题和解决方案不定期的更新,有问题或者不完善的地方随时欢迎各位小伙伴提意见,我们一起探讨呀
Vue现有项目改造为Nuxt项目相关推荐
- 全局安装nuxt_Nuxt项目搭建到Nuxt项目部署
a.为什么? Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态htm ...
- vue项目改造nuxt(SEO优化)
欢迎大家进群,一起探讨学习 微信公众号,每天给大家提供技术干货 博主技术笔记 博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star 1. 背景 今年开源了一 ...
- Linux 服务器部署 vue(SPA) 与 nuxt(SSR)项目
目录 1.安装 node 2.安装 nginx nginx 配置 --with-http_ssl_module 报错 3.nginx的启动.停止与重启 启动 停止 重启 开机自启动 4.安装 pm2 ...
- vue项目转换服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
这是一篇教程,从创建项目到改造项目 vue-cli创建一个项目 在放你做demo的地方,创建一个项目 vue create vue-ssr // 如果你安装了vue-cli4,选择vue2的版本,以下 ...
- 宝塔面板部署nuxt_MacOS下创建及部署vue.js项目(及Nuxt.js、PM2等相关流程)
开发环境 权限准备 为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
- 如何用Nuxt.js构建项目,SSR官网项目搭建流程
SSR渲染 现在Vue,React,angular等三大框架引领的单页面应用大行其道,使用这单页面技术构建的项目比比皆是.这些流行的框架给我们带来的好处显而易见,不仅是开发,维护成本都大大地获得了优化 ...
- vue框架如何将SPA项目改为SSR项目
相信使用vue spa模式开发页面的都知道,使用spa模式的项目首页加载很慢,就算你再怎么切割chunks,首页加载时总会有几秒钟的白屏,非常影响体验,而且spa项目很难进行seo. 如果你也遇到了上 ...
- 【Vue工程】001-Vite 创建 Vue-TypeScript 项目
[Vue工程]001-Vite 创建 Vue-Ts 项目 文章目录 [Vue工程]001-Vite 创建 Vue-Ts 项目 一.环境 二.创建项目 1.pnpm 创建 Vite 项目 2.设置项目名 ...
- 宝塔面板部署nuxt项目线程守护启动以及Nginx反向代理
宝塔面板部署nuxt项目 宝塔部署Vue,nuxt等项目需要是使用到node.jshe nginx才能实现部署.因此使用宝塔面板使用软件安装安装PM2管理器以及nginx代理软件 步骤一 新建文件夹上 ...
最新文章
- (DBA之路【五】)关于锁的故事
- Operations Manager 2012 SP1配置部署系列之(二) SCOM监控SCVMM
- Algorithm Master Road:算法的时间/空间复杂度
- 【Linux入门学习之】grep命令详解
- c语言用h指针n个数求和,C语言程序经典示例—-(20)寻找指定元素的指针
- poj_1442 Treap
- 2N点实数序列为 N=64。用一个复数FFT程序,一次算出,并绘出。
- 记自己在用友的三个月实习经历
- 比较好的论坛(个人认为)
- 常见的蔬菜(vegetables)英语单词:
- 高德地图各种摄像头图标_高德地图Overlay的应用以及照相功能的实现
- Parallels Desktop 16 网络初始化失败,无法联网、无法连接USB的解决方法
- Battle Mages (魔法之战,精灵传说)修改器
- linux修改X2APIC参数,Linux 開機參數 intremap=no_x2apic_optout
- C#蓝牙连接及传输数据的三种方式(蓝牙传输文件、二进制数据)
- 如何设置计划任务程序 每6小时运行一次_如何用 Python 打造一个全自动赚钱的 YouTube 视频发布系统并月入过万(被动收益)
- android studio manifest merger failed,Android Studio报错Manifest merger failed with multiple errors...
- 篇一:数据探索性分析步骤
- pdf合并小工具python
- 百度网盘限速怎么办?