Nuxt重构的填坑之路

news2024/11/18 7:46:38

我的个人网站是用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文件夹下管理状态才能正常使用

五:引入iconfont

只需要将iconfont的资源文件放在assets文件夹下,然后在nuxt.config.js的css属性写上地址即可

 

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

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

相关文章

毕业论文设计题目大全(源码+论文)_kaic

1 四足步行机器人设计-机械部分 2 吸扫一体机器人外壳注塑模具设计 3 吸扫一体机器人控制系统设计设计 4 吸扫一体机器人机械结构设计 5 汽车雨刷器机械结构及控制系统软硬件电路设计 6 家庭智能防盗报警系统的设计 7 小区电气智能控制系统的设计 8 果蔬智能售卖…

第66篇:顶级APT后门Sunburst通信流量全过程复盘分析

Part1 前言 大家好,我是ABC_123。前面几周分享了Solarwinds供应链攻击事件的详细攻击流程及Sunburst后门的设计思路,但是多数朋友还是对Sunburst后门的通信过程还是没看明白。本期ABC_123就从流量的角度,把Sunburst后门的通信过程完整地复盘…

压缩点云数据

压缩分辨率参数 LOW_RES_ONLINE_COMPRESSION:低分辨率的在线压缩模式,不保留颜色信息。 MED_RES_ONLINE_COMPRESSION:中等分辨率的在线压缩模式,不保留颜色信息。 HIGH_RES_ONLINE_COMPRESSION:高分辨率的在线压缩模…

Nacos架构与原理 - Nacos-Sync

文章目录 概述官网系统模块架构同步任务管理页面注册中心管理页面使用场景 概述 NacosSync 是⼀个支持多种注册中心的同步组件,基于 Spring boot 开发框架,数据层采用Spring Data JPA ,遵循了标准的 JPA 访问规范,支持多种数据源存储,默认使用Hibernate…

c++11 标准模板(STL)(std::basic_ostream)(二)

定义于头文件 <ostream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ostream : virtual public std::basic_ios<CharT, Traits> 类模板 basic_ostream 提供字符流上的高层输出操作。受支持操作包含有格式…

float:right 浮动布局后怎么清除浮动对后面元素的影响

1 用overflow:hidden和overflow:auto 在父元素上 2 用伪元素进行清除浮动 ::after

Ubuntu20.04LTS下安装Intel Realsense D435i驱动与ROS运行D435i节点

Ubuntu20.04LTS下安装Intel Realsense D435i驱动与ROS运行D435i节点 1&#xff1a;RealSense的SDK安装 1.1&#xff1a;更新初始化 sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade1.2&#xff1a;注册服务器的公钥 sudo apt-k…

安卓水果店的设计与实现

1.项目概述 随着科学技术和社会经济的不断提高&#xff0c;人们对服务的快捷、便利性要求也越来越高&#xff0c;从而对智能手机上的应用软件提出了更高的要求。一个基于安卓技术的水果系统能够为用户提供一个方便日常操作的便捷点餐功能,它能够满足广大手机用户的对日常水果的…

【Java可执行命令】(七)C头文件创建工具 javah:以Java本机接口(JNI)规范创建C头文件,深入解析创建工具javah ~

Java可执行命令详解之javah 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 语法格式3.1.1 可选参数&#xff1a;-o < file>3.1.2 可选参数&#xff1a;-classpath < path>3.1.3 可选参数&#xff1a;-jni 4️⃣ 应用场景5️⃣ 实现原理6️⃣ 注意事项&#x1f33e; 总结…

win系统安装配置minio笔记

win系统安装配置minio笔记 下载win64版本的minio.exe 可以去minio官网下载&#xff0c;也可以直接在csdn下载&#xff0c;这里提供一个下载地址 https://download.csdn.net/download/ThinkPet/87976200?spm1001.2014.3001.5501配置并启动minio.exe 可以在cmd命令里执行 m…

k8s calico ipip模式详解

一、简介 Calico 是一种容器之间互通的网络方案。在虚拟化平台中&#xff0c;比如 OpenStack、Docker 等都需要实现 workloads 之间互连&#xff0c;但同时也需要对容器做隔离控制。而在多数的虚拟化平台实现中&#xff0c;通常都使用二层隔离技术来实现容器的网络&#xff0c…

毕业喽 ! ——为赋新词强说愁

文章目录 一、引言二、回首六年三、腾讯实习四、遗憾和展望 一、引言 临近毕业&#xff0c;满头思绪&#xff0c;满腔感概&#xff0c;不知从何说起&#xff0c;对离别的不舍、对学生时代即将落幕的留恋和感慨、对即将只身踏入社会的迷茫和不安。果真应验了杜甫老先生的那句话—…

MATLAB散点图绘制

clfx linspace(-3*pi,3*pi,100);y sin(x);color linspace(1,10,length(x));scatter(x,y,25,color,filled);hold onscatter(x0.25*pi,y,100,[0 0 0],*); 大部分时候处理数据还是散点图用的比较多 这里主要是scatter函数&#xff0c;用法是&#xff1a; scatter&#xff08…

华为OD机试真题 Python 实现【机房布局】【2023Q1 200分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、补充说明五、解题思路六、Python算法源码七、效果展示1、输入2、输出 一、题目描述 小明正在规划一个大型数据中心机房&#xff0c;为了使得机柜上的机器都能正常满负荷工作&#xff0c;需要确保在每个机柜边上至少要有一个电箱…

pytorch3d 安装报错 RuntimeError: Not compiled with GPU support pytorch3d

安装环境 NVIDIA GeForce RTX 3090 cuda 11.3 python 3.8.5 torch 1.11.0 torchvision 0.12.0 环境安装命令 conda install pytorch1.11.0 torchvision0.12.0 torchaudio0.11.0 cudatoolkit11.3 -c pytorch安装pytorch3d参考官网链接 https://github.com/facebookresearch/p…

Java 的拷贝(深拷贝、浅拷贝)

在对象的拷贝中&#xff0c;很多初学者可能搞不清到底是拷贝了引用还是拷贝了对象。在拷贝中这里就分为引用拷贝、浅拷贝、深拷贝进行讲述。 引用拷贝 引用拷贝会生成一个新的对象引用地址&#xff0c;但是两个最终指向依然是同一个对象。如何更好的理解引用拷贝呢&#xff1…

工具类之打印表格ByList

前言 昨天在测试应用的时候&#xff0c;因为要查看数据库表里面的数据&#xff0c;但是又懒得去看数据库里面查找那张表&#xff0c;反而直接代码查看更方便。于是做了一个打印List的工具类&#xff0c;可以将List里面的数据进行打印成一个表格展示&#xff0c;List里面的元素…

CH543乐得瑞单C口显示器方案(LDR6020)

首先显示器的种类很多&#xff0c;有桌面显示器&#xff0c;便携显示器&#xff0c;智能显示器&#xff0c;甚至AR眼镜也可以算是一个微型显示器。以往的显示器传输视频信号多为VGA和HDMI,当然DP也有&#xff0c;只是占少数&#xff0c;再早之前还有模拟信号接口等等&#xff0…

牛客网基础语法91~100题

牛客网基础语法91~100题&#x1f618;&#x1f618;&#x1f618; &#x1f4ab;前言&#xff1a;今天是咱们第九期刷牛客网上的题目。 &#x1f4ab;目标&#xff1a;对短除法的使用&#xff0c;对函数的递归使用熟练。 &#x1f4ab;鸡汤&#xff1a;绊脚石乃是进身之阶。先干…

手机便签软件推荐 有没有什么好用的手机便签软件app

在外出需要记事的时候&#xff0c;很多人会使用手机上的便签工具来完成。那手机便签软件推荐哪个比较好&#xff0c;有没有好用的手机便签软件app推荐呢&#xff1f;下面小编就为大家推荐一些用起来体验很不错的手机便签app软件。 一、敬业签 敬业签具备多种便签记事和提醒方式…