本文介绍

nuxt3于2021年底2022年初发布，目前缺少生态，本文介绍一些项目基本配置，包括如下内容

• 配置scss
• 配置axios以及接口开发时跨域
• 全局状态管理
• 生命周期简述

---

本文更新:
2022-06-15:

• 使用自带的$fetch替换axios(不建议使用，仍然建议使用axios，以及部署使用nginx转发端口)
• 页面提示如下错误 ，并在某些行为后无法点击跳转（死页面的情况）

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

• 编译后发布的问题
  • 3.0-rc版本中缺少 start命令
  • static丢失
  • nuxt instance unavailable报错

本次总结:

• 大部分问题都是客户端代码无法在服务端运行的问题

---

本文更新:
2022-06-16

• 发布上线流程

---

配置scss

项目安装sass即可

npm install sass -D

axios

这个部分已经被弃用，请移步至下方的 $fetch

配置axios，创建request对象以及配置拦截器

1. 安装axios

npm install axios -S

2. 创建request.js，我这里放在根目录的apis目录中

// @/apis/request.js

import axios from 'axios'

export const request = axios.create({
	baseURL:'/api',
	...其他配置
})

// 请求拦截
request.interceptors.request.use(...)

// 响应拦截
request.interceptors.response.use(...)

开发时跨域

这个配置比较隐蔽，官方文档也没有说明，其实是配置vite即可，找到配置文件 @/nuxt.config.ts

export default defineNuxtConfig({
	...
	
    vite: {
        server: {
            proxy: {
                '/api': {
                    target: 'http://localhost:9999',  //这里是接口地址
                    changeOrigin: true
                }
            }
        }
    }
    
})

---

全局状态管理

nuxt3不需要vuex，使用内置的useState即可，我们以 user.js为例

项目目录
...
+ store
| - user.js

// @/store/user.js

import {useState} from "nuxt/app";

export const useUserInfo =()=> useState('userInfo', () => ({
    username: '',
    password: ''
}))

组件中直接引入后即可使用
组件A

<template>
	<div>{{userInfo.username}}</div>
</template>


<script setup>
import {userInfo} from '@/store/user.js'

const userInfo = userUserInfo();
</script>

组件B

<template>
	<input v-model="userInfo.username">
</template>


<script setup>
import {userInfo} from '@/store/user.js'

const userInfo = userUserInfo();
</script>

效果如下

生命周期管理

我的规范不一定适用所有人，目前是这样的

1. 使用useAsyncData代替nuxt2中的asyncData，但不使用useFetch和useLazyXXX
2. 使用onBeforeMount代替vue2中的created，这个是比较常规的认知
3. 仍然使用axios进行请求，这里主要是考虑到切换成本
   
   
   
   
   

---

Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘parentNode’)

这个问题，是一些客户端组件无法在服务端渲染的问题，可以看一下它的控制台提示，以element-plus为例，需要添加 process.client的判断

// @/plugins/element.js

import {defineNuxtPlugin} from "nuxt/app";
import ElementPlus from 'element-plus';
import {ID_INJECTION_KEY} from "element-plus";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


export default defineNuxtPlugin((nuxtApp) => {

	// 这里需要判断一下
    if (process.client) {
        const app = nuxtApp.vueApp;
        app
            .provide(ID_INJECTION_KEY, {
                prefix: 'element',
                current: 0
            })
            .use(ElementPlus, {
                size: 'small',
                locale: zhCn,
            })

        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            if (key === 'Link') {
                continue
            }
            app.component(key, component)
        }
    }
});

$fetch接口

首先我们回顾一下我们一般的项目，接口通过跨域配置后，将/api转发至后端，发布到线上通过nginx转发接口，而nuxt3的做法不是这样的

• 首先，跨域只存在于客户端，不存在于服务端，而nuxt实际上是一个node服务
• nuxt3实际做法是，所有请求都请求到 nuxt服务，nuxt服务中再去请求接口

因此，我们写一个中间件
@/server/middleware/api.js

这里转发所有的接口，并携带参数

编译后发布的问题

---

缺少 start命令

根据网上的资料，编译发布到线上应该是先后执行

npm install
npm start

然而实际上，我们会发现，package.json的scripts下，并没有 start命令

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
  },

实际上打包后，我们需要使用这行命令启动服务，它会出现在 npm run build后的日志中，可以说是相当隐蔽了

node .output/server/index.mjs

---

static丢失

编译启动后会发现，通过src="/static/xxx"的静态资源找不到了，这个好解决，我提出3个方案

1. 将静态资源放在oss上
2. 通过nuxt3 server的功能，写一个获取静态资源的接口
3. 通过nginx转发

可以看到后面两个方法相对麻烦一点

---

nuxt instance unavailable报错

这个是最隐蔽的，很麻烦，实际上是nuxt3的 useRoute()的bug，服务端渲染不支持 useRoute()，使用这个方法的时候要判断一下是否为客户端

const route = process.client? useRoute(): {}

另外，服务端要抓取数据，依然是建议使用 server 这个功能，这个功能很全，以后肯定有别的文章来写它，大家有兴趣可以多看看官网的文档 http://v3.nuxtjs.org/

---

发布上线

假设项目名为 nuxt_app

• 在服务器中安装git和nodejs，此处不赘述
• 在服务器中安装 pm2

npm install -g pm2

• 在服务器中使用git clone命令，将项目clone至服务器
• 安装依赖并打包

npm install
npm run build

• 通过 pm2启动项目

pm2 start .output/server/index.mjs --name=nuxt_app