vue3如何实现预渲染超详细保姆级

Vue 3提供了一种名为"静态站点生成(Static Site Generation,SSG)"的预渲染方式,可以将部分或全部页面在构建时预先生成为静态HTML文件。以下是实现预渲染的步骤:

  1. 安装vue-router和@vue/cli-plugin-prerender插件:

    npm install vue-router@next @vue/cli-plugin-prerender@next
    

  2. 在Vue项目的根目录下创建一个vue.config.js文件,并添加以下内容:

    module.exports = {
      pluginOptions: {
        prerenderSpa: {
          registry: undefined,
          renderRoutes: [
            '/',
            '/about',
            '/contact'
            // 添加其他需要预渲染的页面路径
          ],
          useRenderEvent: true,
          headless: true,
          onlyProduction: true
        }
      }
    }
    

  3. 在Vue项目的src目录下创建一个名为prerender的目录,并在其中新建一个routes.js文件,用于定义需要预渲染的路由:

    import Home from '@/views/Home.vue'
    import About from '@/views/About.vue'
    import Contact from '@/views/Contact.vue'
    
    export default [
      {
        path: '/',
        component: Home
      },
      {
        path: '/about',
        component: About
      },
      {
        path: '/contact',
        component: Contact
      }
      // 添加其他需要预渲染的路由
    ]
    

  4. 在Vue项目的入口文件(一般是src/main.js)中,引入routes.js并修改createRouter函数的调用:

    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import routes from './prerender/routes'
    import App from './App.vue'
    
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    
    createApp(App).use(router).mount('#app')
    

  5. 运行以下命令进行预渲染:

    vue-cli-service prerender
    

运行以上命令后,Vue将根据预定义的路由列表生成静态HTML文件,并保存在dist目录中。这些预渲染的HTML文件可以直接部署在任何静态服务器上,从而实现更快的首次加载速度和SEO优化。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git bash各分支修改内容不同但合并后不显示冲突问题

在跟着廖雪峰老师的git学习时,按部就班的执行明后,发现 而不是出现原文的结果 解决方法: 切换位feature分支,再合并 git switch feature1 git merge master 此时我们发现: 后面再跟着原文敲就可以了

【spark RDD】spark 之 Kryo高性能序列化框架

文章目录 一. RDD序列化的原因二. Kryo序列化框架三. spark 配置 kryo 序列化1. 设定kryo序列化2. 注册序列化类(非必须,但是强烈建议做)3. 配置 spark.kryoserializer.buffer 一. RDD序列化的原因 Spark初始化工作是在Driver端进行的&#…

机器人系统ros2-开发实践07-将机器人的状态广播到 tf2(Python)

上个教程将静态坐标系广播到 tf2,基于这个基础原理这个教程将演示机器人的点位状态发布到tf2 1. 写入广播节点 我们首先创建源文件。转到learning_tf2_py我们在上一教程中创建的包。在src/learning_tf2_py/learning_tf2_py目录中输入以下命令来下载示例广播示例代码…

【机器学习与实现】线性回归示例——波士顿房价分析

目录 一、创建Pandas对象并查看数据的基本情况二、使用皮尔逊相关系数分析特征之间的相关性三、可视化不同特征与因变量MEDV(房价中值)间的相关性四、划分训练集和测试集并进行回归分析 一、创建Pandas对象并查看数据的基本情况 boston.csv数据集下载&a…

Grotesque系列靶机Grotesque1

第一步信息收集: 靶机ip:192.168.108.131 攻击机IP:192.168.108.128 nmap扫描靶机的可用端口: 发现http服务的端口存在66端口和80端口 扫描一下靶机端口的http服务: 可以看到,默认的80端口是不存在的&am…

25_Scala集合Tuple

文章目录 tuple1.元组定义2.Tuple元素访问3.如果元素的len2,称之为键值对对象,也称之为对偶元组4.补充上节Map5.Map集合遍历6.集合之间相互转化 tuple 概念:scala语言采用特殊的方式将无关的数据作为一个整体,组合在一起’ 1.元…

【Git】Git学习-13:Gitee和GitLab的使用

学习视频链接:【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 流程 1. 创建仓库/已有仓库 2. 克隆到本地/在远程仓库关联 git clone 仓库地址 git remote add 仓库别…

小语言模型的潜力

想象一下这样一个世界:智能助手不在云端,而是在你的手机上,无缝了解你的需求并以闪电般的速度做出响应。这不是科幻小说,而是科幻小说。这是小语​​言模型 (SLM) 的希望,这是一个快速发展的领域,有可能改变…

聪明与诚实:社会信任的桥梁

在现代社会中,我们经常听到这样的评价:“某人真聪明。”然而,当我们深入思考时,会发现“聪明”这个词背后所承载的含义并不单一。聪明和狡诈往往被混淆,而诚实的价值却时常被忽视。在一个高度诚信的社会里,…

CentOS 自建gitlab仓库:安装相关工具

所需环境 Node 安装项目依赖、项目打包运行Nginx 前端项目部署(正向代理、反向代理、负载均衡等)Git 自动化部署时 拉取代码使用GitLab 代码仓库GitLab-Runner GitLab的CI/CD执行器 一、安装Node 检测是否已安装 常用node -v 命令检测。 如果已安装&a…

【挑战30天首通《谷粒商城》】-【第一天】03、简介-分布式基础概念

文章目录 课程介绍 ( 本章了解即可,可以略过)1、微服务简而言之: 2、集群&分布式&节点2.1、定义2.2、示例 3、远程调用4、负载均衡常见的负裁均衡算法: 5、服务注册/发现&注册中心6、配置中心7、服务熔断&服务降级7.1、服务熔断7.2、服务降级 8、AP…

NVIDIA: RULER新测量方法让大模型现形

1 引言 最近在人工智能系统工程和语言模型设计方面的进展已经实现了语言模型上下文长度的高效扩展。以前的工作通常采用合成任务,如密钥检索和大海捞针来评估长上下文语言模型(LMs)。然而,这些评估在不同工作中使用不一致,仅揭示了检索能力,无法衡量其他形式的长上下文理解。 …

(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

前言 系统学习web漏洞挖掘以及项目实战也有一段时间了,发现在漏洞挖掘过程中难免会碰到一些历史漏洞,来帮助自己或是提高自己挖洞和及时发现漏洞效率,于是开始创建这个专栏,对第一时间发现的1day以及历史漏洞进行复现,来让自己更加熟悉漏洞类型以及历史漏洞,方便自己在后续的项…

为什么会查询不到DNS信息?怎么排查?

DNS(域名系统)是将域名转换为相应 IP 地址的关键系统。查询 DNS 信息具有重要作用,通过查询 DNS 信息,我们可以知道域名对应的 IP 地址,这是最主要的信息,使设备能与目标服务器进行通信;其次是域…

微信小程序03: 获取不限制的小程序二维码

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文小总结1.1.2 上文传送门 2. 获取不限制二维码操作2.1 准备工作2.1.1 请先复制00篇的统一封装代码2.1.2 修改配置文件中的参数 2.2 具体代码使用与注释如下2.2.1 业务代码如下2.2.2 代码解释(一)[无需复制]2.2.3 创建Base6…

每日一题5:Pandas-修改列

一、每日一题 一家公司决定增加员工的薪水。 编写一个解决方案,将每个员工的薪水乘以2来 修改 salary 列。 返回结果格式如下示例所示。 解答: import pandas as pddef modifySalaryColumn(employees: pd.DataFrame) -> pd.DataFrame:employees.loc[…

C语言之数据结构之栈和队列的运用

目录 1. 用队列实现栈1.1 思路讲解1.2 代码实现 2. 用栈实现队列1.1 思路讲解1.2 代码实现 总结 •͈ᴗ•͈ 个人主页:御翮 •͈ᴗ•͈ 个人专栏:C语言数据结构 •͈ᴗ•͈ 欢迎大家关注和订阅!!! 1. 用队列实现栈 题目描述: 请你仅使用两个…

uniapp 自定义App UrlSchemes

需求:外部浏览器H5页面,跳转到uniapp开发的原生app内部。 1、uniapp内部的配置: (1)打开manifest->App常用其他设置,如下,按照提示输入您要设置的urlSchemes: (2&am…

如何更好地使用Kafka? - 故障时解决

要确保Kafka在使用过程中的稳定性,需要从kafka在业务中的使用周期进行依次保障。主要可以分为:事先预防(通过规范的使用、开发,预防问题产生)、运行时监控(保障集群稳定,出问题能及时发现&#…

自签名进行免杀

文章目录 什么是自签名使用cmd生成自签名文件对EXE进行签名将PFX签名使用脚本安装到受信任的根证书颁发机构 什么是自签名 在对抗AV/EDR中使用签名文件是一种很好的策略,拥有签名也就意味着是安全的程序, 大多数AV是不会杀签名程序的,但是签名程序的获取往往比较麻烦使用过期签…
最新文章