什么是 Nuxt？

Vue的SSR框架，服务端渲染，有利于SEO优化和提高浏览器渲染速度！

使用脚手架创建nuxt-app项目

pnpm dlx nuxi init nuxt-app

配置.npmrc文件

shamefully-hoist=true

进入目录，安装依赖，启动项目

code nuxt-app
pnpm i
pnpm run dev 

目录结构

• .nuxt // 自动生成的目录，用于展示结果
• node_modules // 项目依赖包存放目录
• .gitignore // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置
• pages // 开发的页面目录
• components // 组件目录
• assets // 静态资源目录
• layouts // 项目布局目录
• app.vue // 项目入口文件，你可以在这里配置路由的出口
• nuxt.config.ts // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面
• package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致
• package.json // 包的配置文件和项目的启动调式命令配置
• README.md // 项目的说明文件
• tsconfig.json // TypeScript的配置文件

增加pwa功能

官方教程

https://github.com/kevinmarrec/nuxt-pwa-module

安装

npm install -D @kevinmarrec/nuxt-pwa

nuxt.config.ts配置

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ],
//开发环境也生成pwa
  pwa: {
    workbox: {
      enabled: true
    }
  }
})

根目录public目录中添加网站图标文件（不添加，无法生成）

/public/icon.png

常见问题

使用https，ws链接拦截，不断刷新页面

通过反向代理解决

    location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

pnpm安装依赖，会缺依赖

加参数

pnpm i --shamefully-hoist

出现错误“write EPIPE”

npx nuxi upgrade --force