NUXTJS安装始终报错无法正常运行问题解决

近日在了解NuxtJS,按照官方给出方法进行安装后,不是报错,就是安装成功后运行不了。执行npm run dev后始终运行出错,判断肯定是对应版本问题,沿着这方向研究,最终运行成功了。

文档地址:安装 - NuxtJS | Nuxt.js 中文网

一、出现的问题

node版本在14.18.0时出现错误Error: Cannot find module "node:util":

后期将node的版本升级到14.21.3,又出现错误Nuxt Fatal Error:

或者TypeError: arrat is not a function错误:

由于个人其他项目,不便将node版本升级过高,所以在github上翻看了create-nuxt-app版本,随便找了个V2.15.0安装,既然成功了。

地址:Releases · nuxt/create-nuxt-app · GitHub

其他版本没作测试,如遇到安装一直不成功的,可以试试此方法。

二、运行环境

本人的项目运行环境版本如下:

javascript 复制代码
D:\workspace\web\nuxtjs>node -v
v16.20.2

D:\workspace\web\nuxtjs>npm -v
8.19.4

D:\workspace\web\nuxtjs>create-nuxt-app -v
create-nuxt-app/2.15.0 win32-x64 node-v16.20.2

三、安装

Nuxt.js中文网上安装步骤稍作调整一下:

第一步,安装create-nuxt-app的V2.15.0版本,代码如下:

javascript 复制代码
npm install create-nuxt-app@2.15.0 -g

第二步:初始化项目,代码如下:

javascript 复制代码
npx create-nuxt-app demoNuxt

安装过程:

javascript 复制代码
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in demoNuxt
? Project name demoNuxt
? Project description My astounding Nuxt.js project
? Author name Qiang
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Element
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

🎉  Successfully created project demoNuxt

  To get started:

        cd demoNuxt
        npm run dev

  To build & start for production:

        cd demoNuxt
        npm run build
        npm run start

第三步:选择创建项目目录,运行:

javascript 复制代码
D:\workspace\web\nuxtjs>cd demoNuxt

D:\workspace\web\nuxtjs\demoNuxt>npm run dev

结果:

javascript 复制代码
> demoNuxt@1.0.0 dev
> nuxt


 WARN  mode option is deprecated. You can safely remove it from nuxt.config                                   17:26:26


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.17.3                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

i Preparing project for development                                                                           17:26:50
i Initial build may take a while                                                                              17:26:50
√ Builder initialized                                                                                         17:26:50
√ Nuxt files generated                                                                                        17:26:50

 √ Client
   Compiled successfully in 23.72s

 √ Server
   Compiled successfully in 19.90s

此时则可以通过地址http://localhost:3000/访问了。

相关推荐
To_OC8 小时前
LC 131 分割回文串:刚学回溯时,我连怎么切字符串都想不明白
javascript·算法·leetcode
To_OC9 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了
javascript·算法·leetcode
小林ixn9 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
এ慕ོ冬℘゜10 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
随心点儿11 小时前
js postMessage 实现跨域发送消息-应用示例
javascript·ecmascript·postmessage
kyriewen12 小时前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
慧一居士14 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
gis开发之家17 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
橘子星18 小时前
我一个前端切图仔,凭什么能在浏览器里跑大模型?
前端·javascript·前端框架
半个落月18 小时前
用 LangChain JS 做可控写作实验:理解温度参数、提示词与异步调用
javascript·人工智能·后端