创建的vue项目--打包

news2024/11/16 4:43:51
自创建的项目(未使用项目框架),使用weabpack打包

1.在package.json文件中配置

2.在控制台执行打包命令npm run build

打包完成后,会在项目中生成一个dist文件夹,其中就是打包生成的静态文件
在这里插入图片描述
3.打开index.html,即可以在idea中使用浏览器打开访问index.html

若访问页面显示异常,可以参考如下解决方案:


情景1:若出现空白页

浏览器控制台报错:

the server responded with a status of 404 (Not Found)

原因:
资源默认访问根路径,导致加载资源失败。
解决方案:
将根路径改为相对路径。在config的index.js文件中,修改build配置
把默认的assetsPublicPath: '/'修改为assetsPublicPath: './',然后重新打包
在这里插入图片描述

情景2:若加载图片(img标签)成功,加载背景图片(css中)和字体文件失败

原因:
资源内的图片是通过css加载的,background:url(…/ assets / img / bg.png);
但是打包过后的CSS变成了背景:url(…/…/ static / img / bg.68979b3.png);
所以需要修改css配置文件,使资源的引用路径是相对路径
解决方案:
1.在webpack.prod.conf.js,output模块中添加 publicPath: './'

2.在build目录下的untils.js文件中,ExtractTextPlugin方法中添加 publicPath:'../../'
在这里插入图片描述


配置完成后,在控制台重新执行打包命令npm run build即可

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

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

相关文章

RocketMq基础详解

1、RocketMq的架构: 在RocketMq中有四个部分组成,分别是Producer,Consumer,Broker,以及NameServer,类比于生活中的邮局,分别是发信者,收信者,负责暂存,传输的…

找到二叉树中的最大搜索二叉树

题目 给定一棵二叉树的头节点 head,一致其中所有节点的值都不一样,找到含有节点最多的搜索二叉树,并返回这棵子树的头节点。 示例 分析 树形dp套路:如果题目求解目标是S规则,则求解流程可以定成以每一个节点为头节点…

【前端】如何判断是页面滚动还是窗口滚动

在写项目的时候遇到这个问题&#xff0c;现在举两个例子来记录这个问题。 页面滚动 html: <div class"temp"><template v-for"item in 100"><div>{{ item }}</div></template> </div>css: .temp {height: 100px;o…

老马闲评数字化「3」业务说了算还是技术说了算?

原文作者&#xff1a;行云创新CEO 马洪喜 导语 前两集和大伙聊了一下“数字化不转型行不行”以及“你的企业急不急着转”这两个话题。后面收到不少朋友的消息&#xff0c;说写的挺好&#xff0c;但“急着转、不敢转”的情况非常的普遍&#xff0c;有没有啥好主意给说一说。 麦…

冬去春来,ToB行业压缩的弹簧就要迸发了

目前来看&#xff0c;认知、实践、技术、服务这四方面的新变化&#xff0c;都将成为2023年企业数智化业务需求“井喷”的重要原因。 作者|周羽 出品|产业家 2023&#xff0c;冬去春来。 不止于字面。新的一年&#xff0c;中国的ToB厂商即将迎来“拨云见日”的朗朗晴空。 …

[文件上传工具类] MultipartFile 统一校验

目录​​​​​​​ 1. 创建上传文件的统一校验类 包含功能: -> 1. 多文件上传校验 -> 2. 文件名字校验(特殊符号) -> 3. 文件后缀校验 2. 使用方式 建议: 在文件上传开始的位置添加 -> 两个重载方法, 单文件 多文件都支持 -> 示例: 直接可以用, 任意位…

C++ 包装器function

目录 1、为什么需要包装器&#xff1f; 2、包装器的声明和使用 (1) 声明 (2) 实际应用 (3) 包装器接收类成员函数 3、包装器的绑定&#xff1a;bind函数 (1) 调整参数顺序 (2) 调整参数个数 1、为什么需要包装器&#xff1f; 函数模板可以接收各种不同类型的参数&…

光流正负值的含义以及如何利用光流进行warping

本文主要介绍光流的形式&#xff0c;光流值的正负代表什么含义&#xff0c;以及如何利用光流进行warping。 1. 光流正负值的含义 光流的概念&#xff1a;光流表示的是从reference frame到target frame&#xff0c;物体的移动。光流的形式&#xff1a;光流的表示也是数字化的。…

镭速-跨国车企数据高速、安全跨境传输解决方案

一、背景及趋势 在新一代信息技术驱动的数字经济时代&#xff0c;数据已然成为新型生产要素&#xff0c;是国家基础性资源和战略性资源。在汽车市场全球化背景下&#xff0c;产品、数据双跨境将成为车企未来常态。数据的价值核心在于流通和应用&#xff0c;但数据也牵涉着竞争…

23.1.30 将TF-A源码移植的过程,整理成自己的笔记

将TF-A源码移植的过程&#xff0c;整理成自己的笔记&#xff0c;上传到CSDN 一、配置TF-A源码 自动探测 自动换行 1.对tf-a源码进行解压 tar xfz tf-a-stm32mp-2.2.r2-r0.tar.gz 打补丁 3.进入tf-a源码目录 $> cd tf-a-stm32mp-2.2.r2 4.打补丁命令 $> for p in ls -1 .…

JavaScript中的Array对象~

初识Array&#xff1a; Array 对象用于在单个的变量中存储多个值 定义&#xff1a; 方式1 //返回的数组为空&#xff0c;length字段为0 var 变量名new Array(); //size是期望的数组元素个数&#xff0c;返回的length字段将被设置为size的值--返回具有指定个数&#xff0c;元…

vue2面试题持续更新。。。

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xff09;5、$nextTick6、修饰…

postman常用变量总结

一、变量分类环境变量&#xff1a;只在所属环境内使用&#xff1b;全局变量&#xff1a;整个postman中全部接口皆可使用该变量&#xff1b;集合变量&#xff1a;只在设置的集合中可使用&#xff0c;且与环境无关&#xff1b;局部变量数据变量二、环境变量设置方式方式一方式二方…

网络知识详解之:HTTP协议基础

网络知识详解之&#xff1a;HTTP协议基础 计算机网络相关知识体系详解 网络知识详解之&#xff1a;TCP连接原理详解网络知识详解之&#xff1a;HTTP协议基础网络知识详解之&#xff1a;HTTPS通信原理剖析&#xff08;对称、非对称加密、数字签名、数字证书&#xff09;网络知…

第三章.逻辑回归—逻辑回归

第三章.逻辑回归 3.1 逻辑回归&#xff08;Logistic Regression&#xff09; 线性回归以及非线性回归是用来处理回归问题的&#xff0c;而逻辑回归是用来处理分类问题的。 1.应用场景&#xff1a; 1).分类&#xff1a; 垃圾邮件分类预测肿瘤是良性还是恶行预测某人的信用是好…

ITIL知识管理分析及如何实施

什么是知识管理 知识管理是在 IT 服务台内收集、分析、存储和共享知识的过程。它旨在帮助服务台团队在整个使用寿命期间做出正确的决策 通过有效控制和处理信息流来循环和事件解决过程。 ITIL 4将知识管理定义为负责向以下机构提供知识的一个中央流程 所有其他IT 服务管理 &a…

linux / Generic Netlink

一、概述 Generic Netlink 是内核专门为了扩展 netlink 协议簇而设计的“通用netlink协议簇”。由于 netlink 协议最多支持 32 个协议簇&#xff0c;目前 Linux4.1 的内核中已经使用其中 21 个&#xff0c;对于用户需要定制特殊的协议类型略显不够&#xff0c;而且用户还需自行…

SHELL基本知识超级详解

目录 shell基本知识 1&#xff0c;为什么学习和使用Shell编程 2&#xff0c; shell的起源 3&#xff0c;shell的功能 4&#xff0c;shell的分类 5&#xff0c; shell脚本的基本元素 6&#xff0c; shell脚本编写规范 7&#xff0c;shell脚本的执行方式 8&#xff0c; 执…

JavaScript 类的继承

通过原型链的方式继承 通过实例化一个构造函数&#xff0c;使字类的原型指向父类的实例&#xff0c;字类就可以调用到父类的属性和方法 function Parent() {this.parentName 父亲;this.getParentName function () {console.log("parent name is: %s", this.paren…

剑指 Offer 第13天 第14天

目录 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 剑指 Offer 57. 和为s的两个数字 剑指 Offer 58 - I. 翻转单词顺序 剑指 Offer 12. 矩阵中的路径 面试题13. 机器人的运动范围 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 输入一个整数数组&#xff0c;实现一个函…