资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Vue现有项目改造为Nuxt项目

Vue现有项目改造为Nuxt项目

Invoker / 3264人阅读

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题

公司项目，最初只为了实现前后端分离式开发，直接选择了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: "",
    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。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的  标签中。
│   └── 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项目的迁移了

PS：目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新vue项目的改造过程及分享改造过程中遇到的问题

GPU云服务器 云服务器 云服务器搭建vue项目 腾讯云服务器部署vue项目 vue项目放到云服务器上 阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106136.html

相关文章

  • 使用Docker部署Spring-Boot+Vue博客系统

    摘要：先来看一下容器的文件中间一些操作省略这里用了多阶段构建容器，如果直接通过设置环境变量只会在后面一个阶段生效，但是是在第一个阶段执行的，所以环境变量不能应用到当中。 在今年年初的时候，完成了自己的个Fame博客系统的实现，当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍。从完成实现到现在，也断断续续的根据实际的使用情况进行更新。 只不过每...

    Eirunye 评论0 收藏0

  • Nuxt项目支持eslint+pritter+typescript

    摘要：脚手架安装好的基本项目项目名，如，按照提示安装你想要的东西，本次项目预装模式下，默认的项目目录如下保存自动格式化修复本人习惯缩进为个空格，但是生成的项目默认为个，因此需要更改配置文件下的更改为保存时自动修复错误保存自动格式化开启支 脚手架安装好nuxt的基本项目 npx create-nuxt-app ，如：npx create-nuxt-app nuxt-ts，按照提示安装你想要的...

    draveness 评论0 收藏0

  • 细说 Vue 组件的服务器端渲染

    摘要：所以，这次就来聊聊组件的服务器端渲染。这种模式下，后端只提供接口，传统的服务器端路由模板渲染则都有层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。 细说 Vue 组件的服务器端渲染 声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解 现在，前后端分离与客户端渲染已经成为前端开发的...

    reclay 评论0 收藏0

  • 工作中常见问题汇总及解决方案

    摘要：注本文是我在开发过程中遇到问题及解决方法的总结，之后会持续更新，希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习，同时欢迎一起补充。 注：本文是我在开发过程中遇到问题及解决方法的总结，之后会持续更新，希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习，同时欢迎一起补充。 npm篇 npm安装依赖报错：permission denied，错误信息大致如下： npm ERR!...

    ddongjian0000 评论0 收藏0

  • Vue ui 大法哪家强？

    Element iView Vuex Mint UI Vant cube-ui，对比六大 vue ui 组件库，选中最适合的那个。 Element(pc) 介绍 & 版本 饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8 Star：32.067k 项目特色 团队维护 支持三个版本：vue、react、angular 支持 Nuxt.js 常规支持：多语言、自定义主题、按需引入、内置...

    Edison 评论0 收藏0

发表评论

登陆后可评论

0条评论

Invoker

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<