从Vue-cli迁移到Nuxt.js

3,598 阅读1分钟

因为突然告知我们要做SEO优化导致我们不得不换个框架
然后进行了选择(其实也没得选)我们选择了 Nuxt.js 来做我们的框架

首先我们先介绍一下为什么要选择Nuxt.js

  1. 我们不需要进行对后端进行处理
  2. 入门简单 迁移成本低
  3. 因为当时不知道有 prerender-spa-plugin这个webpack插件 (f***)

然后进入Nuxt.js官网进行学习和对项目进行迁移

  1. 进入Nuxt.js官网之后先是调整网站语言在网页右上角你可以调整语言

  1. 安装Nuxt.js然后创建nuxt-app这个项目(这个过程在Nuxt.js的入门中的安装教程)
  2. 有了框架之后就好办了 直接把你在Vue-cli src文件里的代码扔到Nuxt.js的pages文件中就行
  3. 因为Nuxt.js是根据文件位置对路由自动生成所以你要根据你的实际需求跟改一下你的文件位置
  4. 更改路由跳转方式把<router-link to="/">更改为<nuxt-link to="/"> 但是通过$router.push来跳转的就不需要改了
  5. 好啦 没改的啦 请直接用 npm run dev来启动项目吧

遇到的问题和解决方法

  1. 首页白屏

    1. 遇到这问题我真的是x了狗了 不知道完全不知道为什么
    2. 最后只能把首页内的代码作为一个组件引入首页 就解决了...
  2. window not find

    1. 因为是服务器端渲染所以没有windows是很正常的
    2. 解决方法 把windows放到mounted中就好 尽量少用windows

目前大概上遇到这些问题项目已近上线啦 欢迎大家来看http://www.igcexpert.com

点击进入