nuxt
nuxt构建失败：if (codePoint 》= 0x3_00 && codePoint (= 0x3_6F) { SyntaxError: Invalid or unexpected token
错误消息指的是在Node.js中使用了数字分隔符，12.8.1之前的Node版本不支持这种做法。 0x3_00此处使用数字分隔符_。如果没有它，符号看起来就像0x300。 有关支持此功能的Node.js版本的列表，请参阅 https://node.green/#ES2021-features--nu ......
Nuxt3 基础总结
前言 Nuxt3 的对比之前的2 和 1 ，只能感叹前端发展的越来越快了，不学无术 开发更快 打包更小 支持 vite 支持 vue3 支持自动引入 支持文件路由 支持布局系统 支持多种渲染模式 支持 typescript 支持 composition-api 安装NUXT3 需要node 大于16 ......
NUXT - Error: Failed to download template from registry: fetch failed
HOST 路径 C:\Windows\System32\drivers\etc\hosts 前往 HOST 加入 185.199.108.133 raw.githubusercontent.com 测试是否成功 (若无任何信息返回即成功)： node -e "require('https').get ......
Nuxt3.0中使用MongoDB
如何在Nuxt3.0中使用MongoDB数据库 一、介绍 Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建服务端渲染 (Server-Side Rendering, SSR) 或静态生成 (Static Site Generation, SSG) 的单页应用 (Single-Page ......
nuxt3构建优化
1.性能分析 network分析 Lighthouse分析 利用浏览器的Lighthouse工具不仅能够了解到首屏渲染速度等信息，并还能提供相应优化建议 Bundle分析 在nuxt3不需要自行下载第三方依赖也能够进行Bundle分析 配置： 在nuxt.config.ts下写入 export de ......
nuxt3设置404页面
1.在你的page目录下新建一个[...slug].vue的文件，文件内容为自定为自定义的404内容 <!--404页面--> <template> <div class="error-page"> 404 </div> </template> <script setup lang="ts"> se ......
Nuxt-监听浏览器返回
区分普通页面/keep-alive缓存页面 1、普通页面 mounted: { this.setAddListener() }, destroyed() { window.removeEventListener('popstate', this.setBack, false) }, methods: ......
Nuxt-了解
布局 布局文件为layouts 在layouts里创建一个test.vue的布局测试 <template> <div> 页面布局头部 <nuxt/> 页面布局尾部 </div> </template> <script> import Footer from '../components/Footer ......
Vue2 项目使用 nuxt.js 重构 - 一、基本用法及部分依赖注意事项
我自己的网站 https://aijianli.site/ 是使用vue写的，为了能够让用户可以搜索到。对项目进行了 nuxt.js 重构。在重构过程中遇到了 N 多坑。一下记录了填坑经历 一、新建 nuxt 项目 查看官网 https://www.nuxtjs.cn/guide/installat ......
Nuxt.js 生成sitemap站点地图文件
Nuxt.js 生成sitemap站点地图文件 背景介绍 使用nuxt框架生成静态文件支持SEO优化，打包之后需要生成一个 sitemap.xml 文件方便提交搜索引擎进行收录。官网有提供一个插件sitemap 但是如果是动态路由需要手动一个个配置比较麻烦，无法自动检索生成。所以自己编写一个生成 ......
Nuxt font使用
1、assets文件夹下新建 fonts 文件 2、assets 文件夹下新建 style文件夹，并在style下新建 fonts.scss 3、nuxt.config.js下引入 fonts.scss文件 4、页面内使用 p { font-family: Din; } 5、font变量使用方式如下 ......
Nuxt 3 - 入门
目录Hello World Hello World 1.创建项目 npx nuxi@latest init my-bilibili 问题1.： [下午3:54:05] ERROR Error: Failed to download template from registry: request to ......
如何在Nuxt3.0中使用MongoDB数据库
如何在Nuxt3.0中使用MongoDB数据库 一、介绍 Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建服务端渲染 (Server-Side Rendering, SSR) 或静态生成 (Static Site Generation, SSG) 的单页应用 (Single-Page ......
nuxt 项目 certificate has expired 或 nuxt unable to verify the first certificate
plugins/axios.js const https = require('https') export default function ({ $axios}){ $axios.create({ httpsAgent: new https.Agent({ rejectUnauthorized: ......
nuxt 去掉第三方css SEO优化
build: { transpile: [/^element-ui/], extractCSS: { allChunks: true }, vendor: ['element-ui'] }, ......
去除window.__nuxt__
nodemodules中 if (shouldInjectScripts) { // APP += `<script>${serializedSession}<\/script>`; let path = this.options.buildDir + '/dist/client/init/init ......
【腾讯云 Cloud Studio 实战训练营】使用在线编程的方式用Nuxt3开发一个后台管理系统（附源码）
## 前言 大家好，我是刘明，开源技术爱好者，十年创业老兵。 CSDN近期联合腾讯云、Coding、CloudStudio组织了【腾讯云Cloud Studio实战训练营活动】，苦于前些日子一直在备考注册会计师，没有很好的体验Cloud Studio的云IDE产品。现在考试结束了，体验了一把云IDE ......
nuxt 通过服务端检测设备类型 判断PC 还是 移动端
npm install nuxt-user-agent // nuxt.config.js modules: [ 'nuxt-user-agent', ] async asyncData({ $indexApi, store, route, $baseConfigId, $accessKey, $u ......
nuxt 移动端适配 postcss-px-to-viewport
module.exports = { plugins: { autoprefixer: {}, //给不同的浏览器添加前缀 'postcss-px-to-viewport': { unitToConvert: 'px', //需要转换的单位 viewportWidth: '375', //视窗的宽度 ......
nuxt.js解决seo前端渲染
vue项目前端做seo的两种方式、 1、预渲染模式 场景：并不是所有页面都需要做seo 优点：速度相对较快，压力在前端 缺点：不能预渲染动态路由，如果预渲染非常多的页面，操作繁琐 插件：prerender-spa-plugin 2、ssr服务端渲染模式 场景：所有页面都需要做seo 优点：安全 缺点 ......
nuxt3如何配置语言包切换
记录nuxt-i18n 配置： 安装 # npm npm install @nuxtjs/i18n # yarn yarn add @nuxtjs/i18n # pnpm pnpm add @nuxtjs/i18n 设置 // nuxt.config.js 根据后端接口返回的字段值 新建语言包文件 ......
Nuxt.JS实战指南：从入门到精通的练习之旅
Nuxt.js是一个基于Vue.js的通用应用框架，主要关注的是应用的UI渲染，利用Vue.js开发服务端渲染的应用所需要的各种配置。 ......
nuxt.js 引入Jquery的方法
步骤1 npm下载jquery： npm install jquery --save 步骤2 在nuxt.config.js配置引入 const webpack = require('webpack');export default{ build:{ plugins: [ new webpack.P ......
nuxt项目如何在路由地址上添加.html后缀？
export default { // ... router: { extendRoutes(routes, resolve) { routes.push({ name: 'test-id-html', path: '/test/:id.html', component: resolve(__dir ......
使用 nuxt3 开发简约优雅的个人 blog
## 起因 很早前我就有过搭建个人博客的想法，但是我希望使用纯前端实现，这样就不需要付出额外的后端维护成本，维护成本又低，而且更加安全。网上也有很多博客框架但是也不符合我的需求，所以我使用了nuxt3 + ts搭建了自己的个人博客，更加贴合个人需求，在功能和样式也能做到随心所欲 前端的同学一定不会陌 ......
nuxt2升级nuxt3
> 记录升级nuxt3.0过程及问题 ## 为什么要升级 👀 - leader要求的=_= ## 升级后有什么好处和问题 好处从直观来看有： - build出来的文件更小了🥕 - 本地开发启动更快了🏃🏻♀️ - 使用vue3的语法，代码更清晰👁 - 拆分了server层，功能更清晰👁 ......
NUXT3.0实现网络请求二次封装
😊最近在开发基于nuxt3.0的项目，看了官网的网络请求，感觉不太适合，就自己基于官网的useFetch()方法封装了一个网络请求，下面开始实现封装。 🚚第一步：新建http.ts文件，用于编写封装代码 我选择在composables目录中新建http.ts。composables是官方默认的插 ......
nuxt使用宝塔打包部署学习
1. 打包项目 npx nuxi build 打包时间比较久，需要等待一下 2. 打包完成之后将 .output目录打包成压缩包 3. 上传到站点根目录并解压 4. 在站点根目录上创建一个package.json { "private": true, "scripts": { "start": "c ......
记一次Nuxt3更改生成的_nuxt文件夹名称的坑
目的：修改静态生成文件夹名称：_nuxt => static 改这个的原因是部署到Github Page的时候 _nuxt里面的js/css文件提示404，查了一下是因为Github的content policy不允许这类文件的加载。 buildAssetsDir应该包裹在app里面，而不是直接将这 ......
Nuxt3环境变量配置
Nuxt3 正式发布还不到半年，在投入生产环境使用后，遇到了不少问题，很难找到合适的解决方案，其中环境变量配置就是其中一个，之前一直未能解决，最近要上持续集成，无法绕过这个问题，所以花了点时间研究了一下，最终找到了解决方案，记录一下。 官方文档 面对一个新框架，我们自然是希望官方文档能够详细地说明使 ......