Nuxt3入门到精通教程
2022-06-02 05:06:40
2024-12-01 19:27:58
什么是 Nuxt?
Vue的SSR框架,服务端渲染,有利于SEO优化和提高浏览器渲染速度!
使用脚手架创建nuxt-app项目
language
pnpm dlx nuxi init nuxt-app
配置.npmrc文件
language
shamefully-hoist=true
进入目录,安装依赖,启动项目
language
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功能
官方教程
language
https://github.com/kevinmarrec/nuxt-pwa-module
安装
shell
npm install -D @kevinmarrec/nuxt-pwa
nuxt.config.ts配置
js
export default defineNuxtConfig({
modules: [
'@kevinmarrec/nuxt-pwa'
],
//开发环境也生成pwa
pwa: {
workbox: {
enabled: true
}
}
})
根目录public目录中添加网站图标文件(不添加,无法生成)
language
/public/icon.png
常见问题
使用https,ws链接拦截,不断刷新页面
通过反向代理解决
language
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安装依赖,会缺依赖
加参数
language
pnpm i --shamefully-hoist
出现错误“write EPIPE”
language
npx nuxi upgrade --force
目录