vue-cli 项目打包优化-基础篇

1、项目打包完运行空白

引用资源路径问题,打包完的【index.html】文件引用其他文件的引用地址不对

参考配置:https://cli.vuejs.org/zh/config

修改vue.config.js ,根据与 后端 或 运维 沟通修改

module.export = {// 默认 publicPath: '/'// 打包自测阶段可改为 './',实际值根据 后端或运维 沟通决定publicPath: './'
}
2、路由

路由模式hashhistory

  • hash:地址携带 # ,正常打包可访问,前端测试开发阶段使用
  • history:地址栏会改变,可以使用浏览器的【返回】按钮,需要服务器端的支持,需要【后端或运维】做相关配置,做一下路径重定向问题

路由懒加载

export const Routes = [{path: '/xxx',component: Xxxx,children: [{// 懒加载写法component: () => import('@/xxx/xxx')}]},...
]
3、环境变量

参考文档:https://cli.vuejs.org/zh/guide/mode-and-env.html

根目录下新建【.env.development】【.env.production】【.env.test】,生产、开发、测试环境

  • 【NODE_ENV】,【BASE_URL 】是默认的环境变量可访问无法被修改,【NODE_ENV】代表当前的环境模式,【BASE_URL】代表的是当前根路径
  • 自定义环境变量规则:必须以【VUE_APP_】 开头 否则无效
  • 访问方式:在开发中通过 【process.env.变量名称】的方式获取变量值
# 开发环境配置
NODE_ENV = 'development'# 页面标题
VUE_APP_TITLE = 'xxx'# 开发环境
VUE_APP_BASE_API = '/dev-api'# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

根据不同环境做相应的配置

4、安装可视化插件
npm install webpack-bundle-analyzer
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {// 写法一configureWebpack: {plugins: [new BundleAnalyzer()]}// 写法二configureWebpack:config=>{config.plugins.push(new BundleAnalyzer())}
}
5、配置 vue.config.js
module.exports = {// 1、生产模式下打包不生成map映射文件(调试代码时显示代码错误行数,文件很大)productionSourceMap: false,// 2、拆分app.js文件,路由写成懒加载模式,页面js会从app.js拆分出去// 	2.1、代码总体体积变大,但加载速度提升// 3、拆分vendors.js,依赖文件(vue、vue-router、vueX、element-ui等)// 	3.1、ui组件按需引入,自动化引入// 4、代码压缩、图片压缩// 5、cdn// 6、根据文件大小类型选择进一步优化
}

参考视频地址:https://www.bilibili.com/video/BV1wt421p7yM

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

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

相关文章

使用API有效率地管理Dynadot域名,为文件夹中的域名设置域名转发

关于Dynadot Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 Dynadot平台操作教程索引(包括域名邮…

全彩屏负氧离子监测站

TH-FZ5在追求绿色生态、健康出行的今天,景区不仅仅是人们休闲游玩的好去处,更是人们体验大自然、感受清新空气的重要场所。为了进一步提升游客的游览体验,许多景区纷纷引入了全彩屏负氧离子监测站,这一创新举措不仅为景区增添了科…

【怀庄之醉白酒】怀庄之醉酱香白酒哪款好?

【怀庄之醉酱香白酒】在怀庄之醉酱香白酒的丰富系列中,怀庄之醉尊品、怀庄之醉三星和怀庄之醉匠心之作是三款受到广泛欢迎的产品。 每一款酒都具备其独特的风味和适合的饮用场合。以下是对这三款酒特性的分析: 怀庄之醉 尊品:怀庄之醉 尊品…

云通SIPX,您的码号资源智能调度专家!

在数字化转型的浪潮中,号码资源作为企业与客户沟通的重要桥梁,其管理效率直接关系到企业运营的成败。随着运营商对号码资源管理的规范化和精细化,企业对高效、智能的号码资源管理需求日益增长,以实现对外呼叫的降本增效。 一、什么…

学生成绩管理系统带8000字文档学生选课管理系统java项目javaweb项目ssm项目jsp项目java课程设计java毕业设计

文章目录 学生选课成绩管理系统一、项目演示二、项目介绍三、8500字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带8500字文档(9.9¥带走) 学生选课成绩管理系统 一、项目演示 选课成绩管理系统 二、项目介绍 语言: Java …

php数据结构之链表

本文由 ChatMoney团队出品 链表的基本概念 链表(Linked List)是一种常见的数据结构,它由一系列节点组成,每个节点除了存储数据外,还包含指向下一个节点的指针。与数组相比,链表在插入和删除操作上具有更高…

直播带货大模型,开启自动卖货的时代

Streamer-Sales是一个为直播带货主播量身定制的智能工具。 它能够智能分析商品特性,自动创作出引人入胜的解说词,从而有效增强商品的吸引力和提升销售业绩。它还具备多种交互功能,比如将主播的语音实时转换为文字,便于与观众进行…

移动端 UI 风格,书写华丽篇章

移动端 UI 风格,书写华丽篇章

原创作品—医疗行业软件界面UI、交互设计

在医疗行业大屏UI设计中,首要的是以用户为中心,深入理解医生、护士、管理层等用户群体的具体需求和工作流程。大屏设计应直观展示关键医疗数据、患者信息、设备状态等,确保用户能够迅速、准确地获取所需信息。同时,功能布局应合理…

12寸和8寸封装线的差异点

12英寸(300mm)晶圆封装线与8英寸(200mm)晶圆封装线在多个方面存在显著区别,这些区别影响了它们的生产效率、成本结构和适用技术。以下是一些主要差异: 1. **晶圆面积**: - 12英寸晶圆拥有更…

​​植物大战僵尸杂交版直装版v2.1 安卓版:全新策略塔防体验

《植物大战僵尸杂交版直装版》v2.1是由B站UP主“潜艇伟伟迷”精心制作的同人游戏,为策略塔防手游带来了全新的活力。游戏中引入了众多创新的杂交植物,例如结合了向日葵的阳光生成能力和豌豆射手的攻击特性的向日葵豌豆射手,以及拥有寒冰豌豆射…

docker打包 arm32v7/debian 问题总结

1.架构不同 我的宿主是x86 ,但是打包的是arm架构 安装qemu sudo apt-get install binfmt-support qemu qemu-user-static 然后使用buildx打包 docker buildx build --no-cache --platform linux/arm/v7 -t tdc_post:1.0.1 . --load 保存tar docker save -o tdc_post.tar tdc_p…

金融科技如何运用技术手段实现细颗粒度服务

随着金融科技的快速发展,金融机构正在通过采用各种技术手段来提供更加细颗粒度的服务,以满足客户日益增长的个性化需求。这些技术手段不仅提高了金融服务的效率和安全性,还显著提升了用户体验和满意度。 一、大数据分析与人工智能&#xff08…

中国旺旺:廉颇老矣or老而弥坚?

从80后的童年吃到了20后的童年,什么舌尖上的产品能旺这么久? 相信大家都能说出他的名字——中国旺旺。 要问旺旺的第一单品是啥?毫无疑问是旺仔牛奶。 这也体现在财报上,2022财年,旺旺乳品、饮料品类收入双位数下滑&…

【Sklearn驯化-回归指标】一文搞懂机器学习中回归算法评估指标:mae、rmse等

【Sklearn驯化-回归指标】一文搞懂机器学习中回归算法评估指标:mae、rmse等 本次修炼方法请往下查看 🌈 欢迎莅临我的个人主页 👈这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合,智慧小天地! 🎇 免…

动环监控系统数据可靠维护与效能实现

摘要:了解动环监控的功能,总结出通过分析监控系统的数据库和系统软件,采取措施对数据进行维护,充分利用监控系统,确保高效低耗的维护网络。 关键词:监控;数据丢失;备份;恢复;维护 0引言 随着网络信息化和…

如何提高外文文献阅读效率

要提高外文文献阅读效率,可以考虑以下几点: 掌握基础语言能力: 熟练掌握英语或其他目标语言的基础词汇和语法是提高阅读效率的基础。如果语言能力有限,可以通过课程、阅读和听力练习来增强。 选择合适的文献: 根据研…

python-docx 使用xml为docx不同的章节段落设置不同字体

本文目录 前言一、完整代码二、代码详细解析1、处理过程解释(1) 引入库并定义路径(2) 创建docx的备份文件(3) 定义命名空间(4) 打开并处理.docx文件(5) 分析和组织文档结构(6) 设置字体(7) 保存结果前言 本文主要解决的内容,就是为一个docx的不同章节段落设置不同的字体,因为…

6.二叉树.题目3

6.二叉树.题目3 题目17.二叉搜索树中的众数18.二叉树的最近公共祖先19.二叉树搜索树的最近公共祖先20.二叉搜索树中的插入操作。普通二叉树的删除方式 21.删除二叉搜索树中的节点22.修剪二叉树23.将有序数组转化为二叉搜索树24.把二叉搜索树转化为累加树 总结 题目 17.二叉搜索…

LLM大模型本地部署与预训练微调

以通义千问-1_8B-Chat为例,按照官方教程,简单介绍如何将模型进行本地CPU部署以及预训练微调: 1、环境条件:Linux 24G内存左右 2、本地部署: 提前安装好git跟git lfs,否则可能拉取不到模型文件,g…