nuxt2项目迁移nuxt3

本文介绍: 最近做了一个公司官网的工作，记录一下容易踩到的坑供大家参考，主要记录的是升级所用技术的一个更换

最近做了一个公司官网nuxt 框架升级的工作，记录一下容易踩到的坑供大家参考，主要记录的是升级所用技术的一个更换

vue2 -&g t; vue3

nuxt3支持 vue3，而nuxt2支持vue2，所以此次迁移需要将vue2升级为vue3。由于在项目中v ue2使用@vue-class-component来支持ts 语法，而在v ue3中对ts有更好的支持。

首先就是对 <script&g t;添加 lang=“ts”，其次是选择使用 v ue的组合式API或选项式API进行开发。

使用组合式API请参考：https://cn.vuejs.org/guide/typescript/composition-api.html
使用选项式API请参考：https://cn.vuejs.org/guide/typescript/options-api.html
@v ue–class–component 迁移 v u e3语法可以参考文章：https://levelup.gitconnected.com/from-vue-class-component-to-composition-api-ef3c3dd5fdda

此次迁移选择使用组合式API，组合式API可以使用 <script setup&g t; 语法也可以使用 setup() 选项，本次使用setup选项和defineComponent() API来支持ts对组件选项内类型进行正确推导。

IDE推荐使用vscode + v ol ar插件(全面支持v u e3语法和ts，相当于v ue2的vetur，提供语法提示、高亮、以及template、script、style 代码分隔等功能，详见：https://zhuanlan.zhihu.com/p/375096539 有的功能一定要正确的姿势(vs code 版本等等)安装才会生效…)，!!!使用vol ar一定要禁用vetur，不然vol ar会失效

Vuex3 -&g t; Vuex4

在nuxt2中完全支持了vuex3，框架也会处理vue注册 vuex，做到开箱即用。升级为nuxt3官方更建议是用对nux t 系列支持更高的pinia。但是项目为了方便还是使用了vuex，将其升级为vuex4使用。vuex4对ts有更好的支持（其实也还好）

官方对ts支持的指南里指出要定义类型化的store 需要先定义类型化的InjectionKey，原因是
在这里插入图片描述
而vuex 将st o re 安装到 Vue 应用中使用了 Vue 的Provide/Inject 特性，所以InjectionKey是很重要的因素。

// store/index.ts
import { InjectionKey } from 'vue';
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  isBannerLayoutHasFootBanner: boolean
}

export const key: InjectionKey<Store<State&gt;> = Symbol()

export const store = createStore<State>({
  state () {
    return {
      isBannerLayoutHasFootBanner: true
    }
  }
})

// 将store封装一下，不然每次都要再引入key给vuex的useStore传入key来获取store
export function useStore () {
  return baseUseStore(key)
}

nuxt3中通过 useNuxtApp()来获取vue实例，使用nuxt3的plugin 机制，在plugins 目录下创建一个专门用来注册vuex的文件，一定要将key加进去！如下

// plugins/vuex-register.ts
import { store, key } from '@/store'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(store, key)
})

获取store使用vuex提供的usestore接口，但是其只能在setup中使用，在外部使用为undefined。外部使用可以配置全局变量$store来获取【没有配置成功，大家要是有成功案例可以分享一下】项目中我是通过nuxtApp提供的vue实例上的config中全局属性获取的，如下

// page/index.vue
// setup内使用
import { useStore } from '@/store''

export default defineComponent({
  setup () {
    const store = useStore()
  }
})

// 外部文件使用
import { useNuxtApp } from 'nuxt/app'

const vueApp = useNuxtApp().vueApp
const $store = vueApp.config.globalProperties.$store

关于vuex中嵌套 module的使用这次没有涉及到，可以搜一下相关文章…

请求库@nuxt/axios -> oh my fetch

nuxt2所使用@nuxt/axios不支持nuxt3 【哭了，费劲】
在这里插入图片描述
nuxt3推荐使用框架自带 fetch hook 或者 ohmyfetch

简单的封装(不太好轻喷)

// common/fetch.ts
import { $fetch } from 'ohmyfetch'
import util from './util'

const defaultHeaders: Object = {
  'Content-Type': 'application/json',
  'Cache-Control': 'no-cache',
  'If-Modified-Since': '0'
}
const baseDomain = process.env.NODE_ENV === 'development' ? 'https://uc.test.dos.lixinchuxing.cn' : ''
const baseURL = `${baseDomain}/api/v1`

// fetch模板
const apiFetch = $fetch.create({
  responseType: 'json',
  baseURL,
  async onRequest ({ request, options }) {
    // 设置默认请求头
    options['headers'] = Object.assign({}, { ...defaultHeaders }, options.headers || {})
    options['credentials'] = 'include'
  },
  async onResponse ({ request, response, options }) {
    const cookieArr = /csrf-token=[^;]+;?/i.exec(document.cookie)
    if (cookieArr) {
      const csrfToken = cookieArr[0].replace('csrf-token=', '').replace(';', '')
      defaultHeaders['X-CSRF-Token'] = csrfToken
    }

    let data: any = {}

    if (!response) {
      return data
    }

    if (!response._data &amp;&amp; !request) {
      data = response
    } else if (response._data) {
      data = response._data
    }

    if (typeof data.data !== 'undefined') {
      if (response._data.code === 0) {
        return data.data
      }
      return data
    }
    return data
  },
  onResponseError (error) {
    if (!error) {
      util.showToast('异常错误')
      return
    }

    if (error.response) {
      switch (error.response.status) {
        case 301:
          break
        case 404:
          util.showToast('请求发生404错误')
          break
        case 500:
          util.showToast('请求发生500错误')
          break
        case 504:
          util.showToast('请求超时')
          break
        default:
          util.showToast('error:' + error.response.status)
          break
      }
      return Promise.reject(error.response._data) // 返回接口返回的错误信息
    }
  }
})

export const useBaseFetch = (url: string, options: object) => apiFetch(url, options)