VUE NUXT项目开发环境配置注意问题点

若npm run dev命令，出现如下错误，提示缺少模块,脚本运行失败，这不是npm的问题：

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! gulu-ui-1@0.0.0 dev: `vite`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the gulu-ui-1@0.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

或

使用 npm 报错 “Class extends value undefined is not a constructor or null”

解：重新安装node，Linux用命令，需重新安装node_modules

# del node_modules

# del package-lock.json

# npm cache clear --force

# npm install

Windows环境需下载node-v16.18.1-x64.msi包重新安装，安装之前要先卸载旧的node，手动删除node_modules。

'CROSS-ENV' 不是内部或外部命令，也不是可运行的程序

解：原因：cross-env依赖没有安装，执行npm install -save-dev cross-env@即可

Vite插件-vite-plugin-imagemin没有

解：用yarn替代npm安装依赖 yarn add vite-plugin-imagemin --dev

yarn的安装并查看版本

linux下，

# npm install -g yarn

# yarn --version

Windows下，需要下载yarn-1.22.5.msi安装。

Nuxt项目(vue 3.0)目录结构,Nuxt.js 提供了脚手架工具 create-nuxt-app

api 接口目录

assets 资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等. 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件

components vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR

layouts 布局组件目录

pages 页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。

plugins 插件目录

static 静态文件目录，不需要编译的文件

Hooks 公共方法

store vuex目录

env.js Nuxt个性化配置环境变量接口地址

nuxt.config.js nuxt个性化配置文件，内容将覆盖默认

package.json 项目配置文件(依赖关系，启动脚本等)