Nuxt3踩坑笔记

angrybird2332023-10-06FrontendNuxt3 服务端渲染

在使用nuxt3开发ssr项目时，发现了很多初学时的坑，如果你也在学习nuxt3或使用nuxt3开发项目，希望能踩坑笔记能对你有所帮助。

1. 初始化基础项目目录时，使用npm和yarn，切换到cnpm或开启vpn初始化一段时间后都会无响应，无法完整初始化完整项目结构。

解决办法：使用pnpm解决，我使用的镜像源是 https://registry.npmmirror.com/

1. nuxt3中如何配置环境变量，并执行对应的编译命令配置方法：环境变量文件 .env.development

NODE_ENV = 'development'
VITE_APP_API_ROOT = "https://xxxx.com/"
NUXT_APP_API_ROOT="https://xxxx.com/"

package.json命令修改：

"scripts": {
    "dev": "nuxt dev --dotenv .env.development --host",
    "uat": "nuxt dev --dotenv .env.uat --host",
    "prod": "nuxt dev --dotenv .env.production --host",
    "build:dev": "nuxt build --dotenv .env.development",
    "build:uat": "nuxt build --dotenv .env.uat",
    "build:prod": "nuxt build --dotenv.production",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

1. nuxt3中如何处理项目跨域问题

如果是全栈项目，直接通过修改server端的跨域配置允许跨域。如果接口请求的是后端组的接口，使用别的语言编写的接口服务，此时需要处理跨域问题：

本地
线上：环境变量文件 .env.development

NODE_ENV = 'development'
VITE_APP_API_ROOT = "https://xxxx.com/"
NUXT_APP_API_ROOT="https://xxxx.com/"

nuxt.config.ts


export default defineNuxtConfig({
  devtools: { enabled: false },
  alias: {
    "@/img": "~assets/images/",
  },
  app: {
    head: {
      title: "xxxx",
      meta: [
        {name: "viewport", content: "width=device-width, initial-scale=1.0" },
        {name: "google", content: "notranslate" },
        {name: "keywords", content: "xxxxxxxxxxxxxxxxxx" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "xxxxx/favicon.ico" }],
      script: [],
      // css: ["~/assets/styles/index.less"],
      // buildModules: ["nuxt-windicss", "@pinia/nuxt"],
    }
  },
  runtimeConfig: {
    public: {
      baseURL: process.env.NUXT_APP_API_ROOT
    },
  },
  devServer: {
    port: 8080,
    url: "http://localhost:8080",
  },
  nitro: {
    devProxy: {
      // "/api": {
      //   target: "http://localhost:8081", // 这里是接口地址
      //   changeOrigin: true,
      //   prependPath: true,
      // },
    },
    // 该配置用于服务端请求转发
    // routeRules: {
    //   '/web/**': {
    //     proxy: 'https://dg-api-dev.shouyinongye.com//**'
    //   }
    // }
  },
  css: ["assets/styles/index.less"],
  vite: {
    css: {
      preprocessorOptions: {
        // less: {
        //   additionalData: '@use "@/assets/styles/index.less" as *;'
        // }
      }
    }
  },
  modules: [
    '@element-plus/nuxt',
    // '@nuxtjs/tailwindcss',
    // '@nuxtjs/composition-api',
  ],
  plugins: [
    // { src: "~/plugins/vue-icon.ts", mode: "all" },
  ]
})

当接口请求的域名和项目适用的域名不一致时候，可以适用接口转发的方法实现跨域
新增 server/middleware/index.ts文件，使用nuxt3的中间件来实现请求的转发

const { public: { baseURL } } = useRuntimeConfig();

export default defineEventHandler(async (event) => {
  if (event.node.req.url?.includes('/xxx')) {
    const {method, url} = event.node.req
    const options: any  = {
      responseType: 'json',
    }
    options.headers = {
      'content-type': 'application/json',
      accept: 'application/json'
    }
    options.method = method
    if (method !== 'get' && method !== 'GET') {
      options.body = JSON.stringify(await readBody(event))
    }
    const resBody = await $fetch(baseURL + url, options)
    .then(res => res)
    .catch(err => {
      return {
        code: -1,
        msg: '服务端错误',
        payload: null
      }
    })
    return resBody
  }
})

nuxt3中开发环境正常编译和访问，打包时报错

ERROR  RollupError: "isScriptProtocol" is not exported by "node_modules/ufo/dist/index.mjs"

原因： https://github.com/nuxt/nuxt/issues/23517 解决办法：删除多余的项目中未用到的包

nuxt3中开发环境正常编译和访问，打包后预览时报错：

Cannot find package '@popperjs/core' imported from

原因：https://github.com/nuxt/nuxt/issues/12493 解决办法：编辑.npmrc文件

shamefully-hoist=true
node-linker=hoisted
public-hoist-pattern=*

修改package.json, 在dependencies中增加 "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7", 删除node_modules和lock文件，重新初始化node_modules包。