vue-项目打包、配置路由懒加载

1. 简介

在现代前端开发中,Vue.js因其简洁、灵活和高效的特点,已经成为许多开发者的首选框架。

在Vue项目中,打包部署和路由懒加载是两个非常重要的环节。

打包Vue项目是为了将源代码转换为浏览器可以解析的JavaScript文件,以便在服务器上部署和用户端加载。

2. 项目打包

  1. 项目打包
yarn build
// 或
npm run build

注:打包后的文件会生成在dist目录下。

  1. 配置publicPath

在文件vue.config.js中,添加publicPath配置:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({// 设置获取.js,.css文件时,是以相对地址为基准的。// https://cli.vuejs.org/zh/config/#publicpathpublicPath: './',transpileDependencies: true
})

注:配置为相对路径

  1. publicPath介绍

在 Vue 项目中,publicPath 是一个 Webpack 配置选项,用于指定资源文件的公共路径。这个路径主要用于构建生产环境的应用程序。

配置 publicPath 的主要作用如下:

  1. 资源定位:当你的资源文件(如 JavaScript、CSS、图片等)被打包后,它们会被放在指定的目录下。通过设置 publicPath,你可以确定这些资源文件在网络上的位置。
  2. CDN 部署:如果你使用 CDN 来部署你的资源文件,publicPath 可以帮助你指定 CDN 的 URL 作为资源的基础路径。这样,当应用程序运行时,它会自动从 CDN 加载资源。
  3. 资源重定向:在某些情况下,你可能希望将请求重定向到其他服务器或路径。通过配置 publicPath,你可以实现这种重定向逻辑。
  4. 构建输出目录publicPath 也可以指定构建输出文件的目录。默认情况下,Webpack 会将构建后的文件输出到 dist/ 目录下。通过设置 publicPath,你可以更改这个目录结构。

例如,假设你的项目部署在 https://example.com/my-vue-app/ 下,并且你想将资源文件放在该路径的子目录 static/ 下,你可以这样配置 publicPath

// webpack.config.js  
module.exports = {  // ... 其他配置 ...  output: {  publicPath: '/my-vue-app/static/'  }  
};

这样,当你的应用程序运行时,它会自动从 https://example.com/my-vue-app/static/ 加载资源文件。

3. 配置路由懒加载

路由懒加载 & 异步组件, 不会一上来就将所有的组件都加载,而是访问到对应的路由了,才加载解析这个路由对应的所有组件

官网链接

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

将src/router.index.js中注入的路由;需要异步加载的路由 配置为异步:

import Home from '@/views/layout/home'
import User from '@/views/layout/user'
import Cart from '@/views/layout/cart'
import Category from '@/views/layout/category'import store from '@/store'// 配置:异步组件
const Login = () => import('@/views/login')
const Layout = () => import('@/views/layout')
const Search = () => import('@/views/search')
const SearchList = () => import('@/views/search/list')
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')

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

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

相关文章

济公、新宿事件

活佛济公,下凡之前职位是降龙罗汉。看不惯神仙手握神通却不能全心全意为凡人服务,大闹天庭。 天庭一众公务员认为简直一派胡言,那么多天条就算有对有错,先不管,总有一条能治的了你! 观音救场,…

力扣2788-按分隔符拆分字符串

按分隔符拆分字符串 题目链接 解题思路: 1 .传参是一个字符串数组,我们需要对每一个字符串处理 2 .解题中e是字符串数组中的每一个字符串 3 .i是每个字符串的下标,n为每个字符串的大小 4 .遍历整个字符串 5 .start是要切割的位置 class Solu…

热血江湖服务端服务器架设教程

热血江湖服务端服务器架设教程 大家好,我是艾西今天简单的说下热血江湖架设需要哪些东西然后怎么操作,不管你是自己玩还是对外开放,这对于有兴趣的小伙伴总的都是一件好事。技多不压身就是这么个道理,当你需要用上时还希望能记起…

Addressables(1) 从安装到加载单个/多个资源

不想再配改那些狗屎路径,准备研究一下Adressable,据说可以用key加载指定的资源 刚安装下来,随便搞了个资源勾选了一下addressable的框框,多了好多东西啊 概念铺天盖地而来,ok 没事的 慢慢来! 前置知识 P…

C# 字符串(String)

文章目录 前言一、C#字符串(String)二、String 类的属性/方法总结 前言 C#基础学习入门系列- C# 字符串(String) 一、C#字符串(String) C#字符串(String)是一种不可变的序列字符。…

欧科云链与《警察技术》联合发布技术专题.pdf

欧科云链受《警察技术》邀请,于第201期期刊正式刊登“区块链生态安全与虚拟货币犯罪治理”技术专题。欧科云链作为该技术专题主要作者,直接参与本次期刊2篇文章撰写,同时为多篇文章提供欧科云链的最新数据和研究成果。 《警察技术》期刊创办于…

LeetCode——双指针

双指针 思想:双指针主要用于遍历数组,两个指针指向不同的元素,从而协同完成任务。 1. 两数之和Ⅱ-输入有序数组167中等 题意解读:从数组中找出满足相加之和等于目标数的两个数——本质是遍历数组。 存在前提假设: …

Python seaborn库的安装与图像的背景风格(Seaborn篇-01)

Python seaborn库的安装与图像的背景风格(Seaborn篇-01)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

RPC教程 2.支持并发与异步的客户端

1.客户端的使用例子 func main(){//1. 建立连接client, err : rpc.Dial("tcp", "localhost:1234")//2.调用调用指定的RPC方法var reply string //string有默认值err client.Call("HelloService.Hello", "hi", &reply) //即是…

使用docker配置semantic slam

一.Docker环境配置 1.拉取Docker镜像 sudo docker pull ubuntu:16.04拉取的为ununtu16版本镜像&#xff0c;环境十分干净&#xff0c;可以通过以下命令查看容器列表 sudo docker images 如果想删除多余的docker image&#xff0c;可以使用指令 sudo docker rmi -f <id&g…

linux 使用笔记

1.查看运行内存 a.Free 快速查看内存的方法&#xff0c;也是经常使用的命令&#xff0c; -h 更人性化的显示内存的单元 -m 以M的形式显示 b.Top Top命令提供了实时性的运行中的程序的资源使用统计。可以根据内存的使用和大小来进行排序。 如上所示&#xff0c;top命令可以看…

伊恩·斯图尔特《改变世界的17个方程》波动方程笔记

主要是课堂的补充&#xff08;yysy&#xff0c;我觉得课堂的教育模式真有够无聊的&#xff0c;PPT、写作业、考试&#xff0c;感受不到知识的魅力。 它告诉我们什么&#xff1f; 小提琴琴弦上某个小段的加速度&#xff0c;与相邻段相对于该段的平均位移成正比。 为什么重要&…

算子开发参考

神经网络框架自定义算子 https://www.tensorflow.org/lite/guide/ops_custom?hlzh-cn https://www.megengine.org.cn/doc/stable/zh/user-guide/tools/customop.html https://www.paddlepaddle.org.cn/documentation/docs/zh/guides/custom_op/index_cn.html https://whu.obs.…

“GPC爬虫池有用吗?

作为光算科技的独有技术&#xff0c;在深入研究谷歌爬虫推出的一种吸引谷歌爬虫的手段 要知道GPC爬虫池是否有用&#xff0c;就要知道谷歌爬虫这一概念&#xff0c;谷歌作为一个搜索引擎&#xff0c;里面有成百上千亿个网站&#xff0c;对于里面的网站内容&#xff0c;自然不可…

TCP发送优化(ZeroWindow分析)

通信模型一&#xff1a; Client 创建一个 TCP 的 socket&#xff0c;并通过 SO_SNDBUF 选项设置它的发送缓冲区大小为 2048Byte&#xff0c;连接到 Server 后&#xff0c;每 1 秒发送一个 TCP报文(1024Byte)。Server 端不调用 recv()。预期的结果则分为以下几个阶段&#xff1…

Hive数学函数讲解

Hive 是一个基于 Hadoop 的数据仓库工具&#xff0c;它支持类似于 SQL 的查询语言 HiveQL&#xff0c;并且提供了许多内建的数学函数来处理数值数据。下面我将逐一讲解您提到的这些数学函数&#xff0c;并提供一些使用案例和注意事项。 ROUND() 功能&#xff1a;四舍五入到指定…

【小白向】MMDeploy安装部署|暗坑标注版

文章目录 序言正文1 安装PPLCV2 TensorRT环境相关3 编译MMDeploy4 编译SDK结束 序言 本文主要针对在编译安装OpenMMLab团队的MMDeploy模型部署工具时遇到的“难以下手”的问题。 由于OpenMMLab的用户中很大一部分都是具有快速开发需求的人&#xff0c;或者说其实相当部分OpenM…

c语言算法——大数相加

C数据类型 类型与描述1基本数据类型 它们是算术类型&#xff0c;包括整型&#xff08;int&#xff09;、字符型&#xff08;char&#xff09;、浮点型&#xff08;float&#xff09;和双精度浮点型&#xff08;double&#xff09;。2枚举类型&#xff1a; 它们也是算术类型&am…

【docker】之基础篇二

目录 一、docker的数据管理1、数据卷2、数据卷容器&#xff1a; 二、端口映射与容器互联容器之间的通信 三、Docker查看日志四、Dockerfile定制镜像1、DockerFile常用的命令2、DockerFile实操 一、docker的数据管理 在生产环境中使用docker&#xff0c;需要对数据进行持久化&a…

R语言的ggplot2绘制分组折线图?

R绘制分组折线图.R 首先看数据情况&#xff1a;group有3组。Time有3组&#xff0c;数据意思是在3组3个时间点测量了某指标&#xff0c;现在要绘制组1、组2、组3某指标y按时间的变化趋势 数据情况&#xff1a; 看看最终的效果图如下&#xff1a; 下面是本次使用的代码 .libPat…