用Nuxtjs把vue2.x项目重构为ssr项目总结

EmiliaLiu
787 阅读4分钟

工作需要把一个vue项目重构为服务端渲染，初次体验nuxtjs，记录下遇到的问题！

前期准备工作

1、nodejs升级至v18以上

nodejs版本：nodejs.org/zh-cn/about…

用nvm安装node遇到装不上npm和npx的问题，用安装包装是最全的，但是nvm管理不上用包安装的node版本，可以把包安装在nvm下的对应版本就可以关联nvm使用了。

image.png

如果nvm use 版本号，不起作用，就把删掉C:\Program Files下nodejs删掉，就可以了。

image.png

还可以直接只用yarn或者pnpm代替npm

2、全局安装Nuxtjs

Nuxtjs文档www.nuxtjs.cn/guide/insta…

npm install -g nuxi

3、初始化nuxt项目

yarn create nuxt-app 项目名 
//或者 
npx create-nuxt-app 项目名 
//npx 在 NPM 版本 5.2.0 默认安装了 //如果npx报错，检查node或者npm版本

然后确认每一步的依赖即可

image.png

nuxt.config.js配置

项目迁移

nuxt项目，目录结构：nuxt项目相比较vue项目，没有index.html、main.js、App.vue这些入口文件

image.png

1、页面迁移

把vue页面拷贝到pages文件夹下，没有的话就自己创建，一定是pages，nuxt会把pages下的所有文件默认生成路由。

App.vue=====> layouts/default.vue

image.png

2、路由迁移

nuxt会根据pages下的页面自动生成路由。更多路由方式见：www.nuxtjs.cn/guide/routi…

自动生成的路由

image.png

重构项目如果想保持原来的的路由，自动生成的路由不满足条件，也可以自定义路由。

3、组件迁移

跟vue不同的是，components下的组件，不用import，直接可以用，如果重构vue项目 ，之前引用注册组件了，也没问题。

image.png

4、数据交互迁移

需要服务端渲染的数据，可以在asyncData和fetch中请求接口。

页面中使用asyncData image.png

组件中使用fetch image.png

使用三方插件

比如：element ui、swiper、jquery等

1、安装插件

2、引入插件：在plugins目录下创建一个新的JavaScript文件，例如jquery.js。

image.png

3、在nuxt.config.js中全局注册

image.png

nuxt生命周期

在页面渲染之前是没有客户端方法的，比如window、navigator等，页面渲染后在客户端可以用，注意生命周期。

1、服务端的生命周期

//执行顺序为： 
nuxtServerlnit(store,context){},  
//类似于vue.js中的main.js。可以在这个生命周期中获取token，并存储。 

//store     : vuex上下文 //context : nuxt上下文  

Moddleware（{store,route,redirect,params,query,req,res}）{}，
//类似于vue.js中的导航守卫，可以是全局的，路由的，组件的。可以在这个生命周期中进行用户是否登录判断， //全局    nuxt.config.js进行配置 router:{ 　middkeware:'js文件'}  

validate（{params,query}）{return：true} //用来做校验做url参数对不对的.主要是在页面中使用 

asyncData() 
//仅限于页面组件(pages)中使用个，components中不能使用每次加载之前被调用。一般在这个函数中发送请求 //asyncData中没有this，获取数据后要return出来    

fetch()   
//可以在页面、组件中都能使用 
//fetch中是有this的，可以像vue一样给data中的变量赋值 
//但是在页面中使用fetch请求数据给data中的变量赋值，可以拿到数据，但是无法渲染到页面上

2、服务端和客户端公用个的生命周期 (模板还没有被渲染)

beforeCreate()  

created()  

3、客户端的生命周期

beforeMount()
mounted()  
//在这两个生命周期中可以用浏览器方法，navigator、window等

打包部署

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。

服务端渲染应用部署

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build
nuxt start

推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

提示： 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

静态应用部署

Nuxt.js 可依据路由配置将应用静态化，使得我们可以将应用部署至任何一个静态站点主机服务商。

可利用下面的命令生成应用的静态目录和文件：

npm run generate

这个命令会创建一个 dist 文件夹，所有静态化后的资源文件均在其中。如果你的项目需要用到动态路由，generate命令不会打包，只打包静态路由。

例如：不会被打包

-| pages/
---| index.vue
---| users/
-----| _id.vue

我们可以在 nuxt.config.js 中为 /users/:id 路由配置如下：

module.exports = {
  generate: {
    routes: ['/users/1', '/users/2', '/users/3']
  }
}

如果参数是动态的，可以调用接口 nuxt.config.js

const axios = require('axios')

module.exports = {
  generate: {
    routes() {
      return axios.get('https://my-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}

踩到的坑

1、sass和node-sass版本问题，最后用了sass，要在nuxt.config.js中注册

image.png

2、服务端没有浏览器方法，navigator、window等方法都会报错，需要区分服务端和客户端，可以在客户端特有的钩子函数中使用，比如：beforeMount() mounted() 。

3、三方插件有可能会用到客户端方法，比如swiper，全局引用在nuxt.config.js中设置

image.png

4、安装swiper，在plugins中新建了swiper.js，引入swiper找不到文件，要在node_modules里找下具体目录

image.png

avatar
文章
阅读
粉丝