VueCli的Nuxt重构

news2024/11/16 21:55:56

我的博客用vuecli写的,SEO不忍直视。于是用Nuxt重构了代码,过程中踩了无数坑

一:body样式不生效

正常的body样式设置不能生效,需要在nuxt.config.js中配置

1、设置bodyAttrs的class属性,该属性值对应一个类名

2、该类名所在的css文件,需要在nuxt.config.js中设置一下路径

二:store的用法差异

声明时差异:export出一个函数

 调用时差异:import的是个函数,所以要先执行函数

三:Nuxt打包

如果需要打包成静态资源,直接npm run build是不行的。这样打包出来的文件是没有静态入口html文件的。需要执行npm run generate来打包出静态资源

且nuxt.config.js需要做如下配置

四:Nuxt的Vuex使用

在plugins文件夹下,放一个vuex.js文件,并在nuxt.config.js中引入。

然后在store文件夹下管理状态才能正常使用

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/700640.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java面试题】Java基础——查找算法

文章目录 基本查找二分查找★★★插值查找斐波那契查找分块查找 基本查找 基本查找也叫做顺序查找 ​ 说明:顺序查找适合于存储结构为数组或者链表。 基本思想:顺序查找也称为线形查找,属于无序查找算法。从数据结构线的一端开始&#xff…

IP地址定位查询技术,不管对方在哪,轻轻松松查到他的位置

这是外面在卖588的抓ip技术,真的很简单,卖此技术的人帮人查一次都能赚几十,每天都能出个两三单 玩法:可以生成链接、邮件、图片、pdf的形式,发送给对方的微信或者QQ等地方,只要对方点击后,立马…

知易行难!项目推进的6大常见问题

项目推进是一项企业发展业务中的关键任务。然而,许多项目在实施过程中遇到各种困难和挑战,导致项目无法按计划进行或无法实现预期的成果。以下是项目推进过程中常见的六个问题以及解决方案。1、项目目标不明确 项目推进时,如果项目团队不清楚…

Material —— 材质节点 | Utility

目录 AddNamedRerouteDeclarationNode... AddRerouteNode... AntialiasedTextureMask AtmosphereSunLightIlluminanceOnGround AtmosphereSunLightVector BentNormalCustomOutput BlackBody BoxMask-2D BoxMask-3D BumpOffset(B) ChannelMask…

Spring Boot 中的 STOMP 是什么,原理,如何使用

Spring Boot 中的 STOMP 是什么,原理,如何使用 介绍 在 Spring Boot 中,STOMP 是一种简单的文本协议,用于在客户端和服务器之间进行实时消息传递。它是 WebSocket 协议的一种扩展,可以在 WebSocket 上运行。在本文中…

Electron + ts + vue3 + vite 项目搭建

新建一个vite ts vue3的项目 在创建选项中选择ts和vue选项。 之后,安装依赖之后试运行一下,出现一下页面意味着vite-vue项目创建成功。 npm create vitelatest electron-vue3-ts-vite-test1 VSCode打开electron-vue3-ts-vite-test1或者cd electron-…

vue项目运行后使用ip地址在手机上打开

文章目录 1、获取ip地址2、保证你的手机和电脑使用的是一个wifi3、修改配置文件 1、获取ip地址 windowr,输入cmd按回车后在输入ipconfig ipv4地址就是你了 2、保证你的手机和电脑使用的是一个wifi 3、修改配置文件 (1)vue.config.js文件中…

大数据时代,商业智能BI的使用规则

商业智能BI的火热程度让很多不了解的企业也在内部部署了BI系统,怎么利用BI创造价值也就成了新的问题。 商业智能面向管理人员 很多人其实不理解,为什么说企业的管理人员想要完全了解企业的各项业务发展情况实际上是很困难的。 一家企业有这么多部门&a…

【redis】stream消息队列

目录 截图一、代码示例1.1 pom.xml依赖1.2 application.xml配置1.3 启动类1.4 配置类1.5 消息实体1.6 自定义错误1.7 自定义注解1.8 服务类1.9 监听类1.10 controller 截图 一、代码示例 1.1 pom.xml依赖 <?xml version"1.0" encoding"UTF-8"?> …

Unity VR:XR Interaction Toolkit 官方 Demo

Unity XR Interaction Toolkit 提供了一个官方 Demo&#xff0c;包含了丰富的功能演示&#xff0c;可以供大家更好地学习 VR 开发。 项目地址&#xff1a;https://github.com/Unity-Technologies/XR-Interaction-Toolkit-Examples 项目里包括多个演示场景&#xff0c;而 XRI_…

Unity 中 TextMeshPro 字体位置偏上/偏下

问题&#xff1a;在Unity中创建了一个新的TextMeshPro 字体&#xff0c;在使用的时候布局设置的居中对齐&#xff0c;但在场景中实际位置却和预期位置不服&#xff0c;如下图。 当然通过调整布局设置&#xff0c;也可以显示成正常的效果&#xff0c;但不可能所有文本都通过这…

element栅格自定义等分

由于element栅格组件是 24 分栏&#xff0c;所以当我们需要5、7、9等分时&#xff0c;就不好实现 <template><el-row><el-col :span"24">1</el-col></el-row><el-row><el-col :span"12">2</el-col><e…

【Java可执行命令】(三)API文档生成工具javadoc: 深入解析Java API文档生成工具javadoc ~

Java可执行命令详解之javadoc 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 语法格式3.1.1 可选参数&#xff1a;-d < directory>3.1.2 可选参数&#xff1a;-sourcepath < pathlist>3.1.3 可选参数&#xff1a;-classpath < pathlist>3.1.4 可选参数&#xff1…

JTAG 、 SWD 和 J-Link、ST-Link

JTAG和SWD的区别与联系JTAG接口SWD接口JTAG和SWD的区别与联系J-Link和ST-LinkJ-LINK仿真器STLINK仿真器JLINK和STLINK的比较与选择 JTAG和SWD的区别与联系 JTAG和SWD是两种常用的用于调试和编程ARM微控制器的接口&#xff0c;它们都可以通过调试器&#xff08;如ST-LINK或J-Li…

插入排序——希尔排序

希尔排序其实就是一种插入排序&#xff0c;实际上就是通过直接插入排序一步步改进优化而实现的。所以在了解希尔排序之前要明白插入排序的实现原理。 插入排序 其实我觉得插入排序也可以叫做摸牌排序&#xff0c;就是从第二张牌开始处理&#xff0c;将摸到的牌按照合适的顺序插…

音频分析仪-测试

底噪&#xff1a; 有效值&#xff1a; ** 增益&#xff1a; ** ** 延时-脉冲响应 **

基于Java+Swing+Mysql影院售票系统

基于JavaSwingMysql影院售票系统 一、系统介绍二、功能展示1.主页2.新增影片信息3.删除影片信息 三、数据库四、其他系统实现五、获取源码 一、系统介绍 该系统实现了查看影片列表、新增影片信息、删除影片信息 运行环境&#xff1a;eclipse、idea、jdk1.8 二、功能展示 1.…

大环境之下软件测试行业趋势能否上升?

如果说&#xff0c;2022年对于全世界来说&#xff0c;都是一场极大的挑战的话&#xff1b;那么&#xff0c;2023年绝对是机遇多多的一年。众所周知&#xff0c;随着疫情在全球范围内逐步得到控制&#xff0c;无论是国际还是国内的环境&#xff0c;都会呈现逐步回升的趋势&#…

Java教程-Java异常传播

异常首先从调用堆栈的顶部抛出&#xff0c;如果没有被捕获&#xff0c;它会向下传递到前一个方法。如果在那里没有被捕获&#xff0c;异常会再次向下传递到前一个方法&#xff0c;依此类推&#xff0c;直到它们被捕获或者达到调用堆栈的最底部。这被称为异常传播。 异常传播示例…

Beego之Bee安装以及创建,运行项目

一.简介 Bee是什么&#xff1f; bee工具是一个为了协助快速开发 Beego 项目而创建的项目&#xff0c;通过 bee 可以很容易的进行 Beego 项目的 创建、热编译、开发、测试和部署 Beego中文文档 Beego中文文档: Beego简介 安装前提 在安装bee之前&#xff0c;首先得提前安装好Go的…