Nuxt2升级Nuxt3指南（二）：nuxt.config.js配置文件

一、代码移植原则

前置说明：根据项目开发的实际情况，本次升级不采用Typescript。

升级的原则是开始尽量的简单配置，将代码分阶段逐步移植到新版本框架上，遇到问题逐一排查解决。

大致阶段，可以分为：
第一阶段：项目运行依赖的基本代码移植，主要涉及：Nuxt配置，UI框架（Element-UI）,store（由Vuex改为pinia）, 插件，中间件，http请求，工具函数及其它全局对象相关的代码

第二阶段：移植layouts布局文件及pages页面代码，将Vue2代码语法改为Vue3代码语法

第三阶段：解决前面两个阶段在代码移植过程中遗漏或者暂时不予解决的问题（但又不影响主要代码的移植和运行，比如一些第三方组件或者插件的使用在移植过程中遇到问题）

二、nuxt配置

首先从nuxt.config.js的配置文件开始：
先看一下原有Nuxt2的配置，如下

通过分析代码，可以先迁移css、plugins及modules的部分比较主要的配置：

如上所示，下一步需要迁移的相关配置，涉及：

①Element-Plus框架的引入（Element-UI需要替换为Element-Plus）
②项目Css样式文件
③http请求的封装（Nuxt3不再建议使用Axios）
④Vue相关扩展、全局组件及过滤器的替换（Vue3已经移除了Filter）
⑤Vuex的迁移（改为Pinia）

详细的迁移如下：

1.Element-Plus引入

（1）先安装Element Plus：

 pnpm install element-plus

（2）安装Nuxt官方专门针对引入Element Plus 开发的模块：

pnpm i @element-plus/nuxt -D

（3）在nuxt.config.ts中配置modules参数：

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})

2.项目css样式

export default defineNuxtConfig({
  modules: [ '@element-plus/nuxt'],
  css: [
    '~/assets/style.css'
  ]
})

3.http请求的封装

由于项目中大量使用到$http对象，这个对象其实是对axios的封装，主要有两种使用方式：
①在asyncData函数中使用ctx.app.$http
②在Vue实例对象上使用this.$http
这两种方式分别对应的绑定代码：
① app.$http：

// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.$http = http
}

②Vue.prototype.$http：

Vue.prototype.$http = http

以上代码都是在plugins/main.js中实现（接下来，也需要迁移这个文件代码），我们先实现对http的封装：

在utils目录下新建http.js文件，文件内容如下：

/**
*  nuxt项目目录/utils/http.js
*  基于useFetch()的网络请求封装
*/
import md5 from 'md5'
import qs from 'qs'

//全局基础URL
const BASEURL = "https://xxxx";  //全局后台服务器请求地址
const COMMON_HEADERS = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
  'Accept': 'application/json'
}

/**
 * 网络请求方法
 * @param obj 请求参数
 * @returns 响应结果
 */
const request = (obj) => {
  const sault = obj.url.split('/')[2]
  const userIp = useCookie('x-user-ip')
  const nuxtApp = useNuxtApp()
  
  let baseData = {
    ...signStamp(sault),
    guard: userIpMd(userIp.value || '-')
  }
  let queryData = null
  let bodyData = null
  
  if(obj.method == 'get') {
    queryData = Object.assign({}, obj?.params || {}, baseData)
  } else if(obj.method == 'post') {
    bodyData = qs.stringify(Object.assign({}, obj?.data || {}, baseData), { indices: false })
  }
  return new Promise(async (resolve, reject) => {
    const options = {
        baseURL: BASEURL,
        key: md5(obj.url + (queryData || bodyData)??(JSON.stringify(queryData || bodyData))),
        method: obj.method,
        query: queryData,
        body: bodyData,
        timeout: 20000,
        onRequest({ request, options }) {
          // 设置请求报头
          options.headers = Object.assign(COMMON_HEADERS, options.headers || {})
            /**如果接口需求携带token请求，则可先自行使用官方的useCookie()方法设置Cookie存储后，再使用useCookie()方法，取出token使用。如下例子：*/
            //const token = useCookie('token')
            //options.headers.Authorization = token.value||null
        },
        onRequestError({ request, options, error }) {
            // 处理请求错误
            console.log("服务器链接失败!")
            reject(error)
        },
        onResponse({ request, response, options }) {
        },
        onResponseError({ request, response, options }) {
            // 处理响应错误
          return response
        }
    }
    if(process.client && !nuxtApp.isHydrating) {
      const res = await $fetch(obj.url, options)
      resolve(res)
    } else {
      const { data } = await useFetch(obj.url, options)
      resolve(data.value)
    }
  })
}

export const httpGet =  (url, payload = undefined,headers = undefined, cache = false) => {
  return request({
    method: 'get',
    url: url,
    params: payload,
    headers: headers
  }).then(rsp => {
    return rsp
  })
}

export const httpPost = (url, payload = undefined,headers = undefined, cache = false) =>{
  return request({
    method: 'post',
    url: url,
    data: payload,
    headers: headers
  }).then(rsp => {
    return rsp
  })
}

export const $http = {
  get: httpGet,
  post: httpPost
}

以上代码比较粗略，仅供参考（其中使用的第三方依赖需要前置安装，部分函数不给出实现，按需要删减代码）

4.Vue相关扩展、全局组件及过滤器的替换

这部分也是在plugins/main.js中定义，所以接下来迁移plugins/main.js中的代码：

①Vue相关原型扩展：
原代码：

迁移后：
在utils目录中新建extend.js:

②全局组件：
迁移到components目录，如遇到报错先暂时修复

③过滤器
原代码：

直接废除过滤器的写法，改到utils的extend.js中：

至此plugins/main.js中的代码已经都迁移完成，文件已经没有什么作用，也就不需要这个文件了。

5.Vuex的迁移

Vue3我们搭配改用Pinia：
①安装pinia：

pnpm install pinia @pinia/nuxt

②nuxt.config.js中配置pinia：

export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

③在store目录创建index.js文件：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    token:"",
    ...
  }),
  actions: {
    settoken(token){
      this.token=token
    },
    ...
  }
})

④pinia封装插件：
在plugins目录新建pinia.js：

import { useMainStore } from '~/store'

export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      store: useMainStore($pinia)
    }
  }
})

这样代码中就可以使用以下方式进行调用：

  const { $store } = useNuxtApp()
  $store.xxx // 属性或者actions

⑤修改现有代码中使用到store的代码：
注意Vuex和Pinia在语法上的差别，进行等效替代，比如在actions上的调用方式，两者就有区别。

最后一起看一下，迁移后的Nuxt.config.js如下：

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@pinia/nuxt', '@element-plus/nuxt'],
  plugins: [],
  css: [
    '~/assets/style.css'
  ]
})