VUE打包详细步骤

article/2025/9/3 19:58:35

一、vue2

1.修改请求静态资源的路径
打开config文件夹下的index.js文件,修改assetsPublicPath的值,从"/“改为”./"。即从根路径改为相对路径。

assetsPublicPath:'./'

在这里插入图片描述
2、修改本地图片的路径
打开build下的utils.js文件,增加

publicPath:'../../'

在这里插入图片描述

二、vue3

1.在vue.config.js加入

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //根路径};

2.在router的index.js中加入(改成hash模式)

const router = new VueRouter({routes,mode: "hash", 
});

三:出现iconfont不显示的问题

1.在iconfont.css中(加上https:)

@font-face {font-family: 'iconfont';  /* Project id 3292342 */src: url('https://at.alicdn.com/t/c/******.woff2?t=1670311100709') format('woff2'),url('https://at.alicdn.com/t/c/******.woff?t=1670311100709') format('woff'),url('https://at.alicdn.com/t/c/******.ttf?t=1670311100709') format('truetype');
}

2.在public的index.html中(加上https:)

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3292342_lr0r2ypcpcp.css">

四、重新打包

npm run build

http://chatgpt.dhexx.cn/article/llJgRm6y.shtml

相关文章

VUE打包目录自定义

新接手VUE项目&#xff0c;因为项目需要&#xff0c;我们要按照之前的项目结构打包&#xff0c;VUE自动生成的打包目录结构不符合要求。 1.dist目录不能用&#xff0c;导致每次打包需要将dist文件夹重新命名&#xff0c;如果要修改打包后文件的目录&#xff0c;需要修改“conf…

vue打包路径设置

vue 打包路径设置 vue打包默认路径css中图片路径等线上不显示工程源码 vue打包默认路径 1.vue打包之后的默认路径是从根目录开始算的&#xff0c;如果你的项目并不是根目录&#xff0c;而是子目录&#xff0c;这种设置就会导致路径错误&#xff0c; 解决方法&#xff1a;修改c…

Vue项目打包部署

前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)&#xff0c;跟着做了一遍&#xff0c;由于本人是第一次尝试&#xff0c;遇见了很多问题。经过查阅和搜索&#xff0c;终于解决掉了。下面给大家介绍一下我的流程和遇见的问题&#xff0c;我们可以多…

Vue中如何进行打包与部署?

Vue中如何进行打包与部署&#xff1f; Vue是一款流行的JavaScript框架&#xff0c;它提供了丰富的功能和组件&#xff0c;可以用于构建现代化的Web应用程序。在开发Vue应用程序时&#xff0c;我们通常需要进行打包和部署。本文将介绍Vue中的打包和部署&#xff0c;包括使用Web…

vue 打包的方式

我是一个苦b的程序员&#xff0c;今晚加班到快通宵了&#xff0c;困得快睁不开眼了&#xff0c;女上司很关心&#xff0c;问我要不要吃宵夜。我没好气地说&#xff0c;宵夜就算了&#xff0c;能让我睡一觉就行了。女上司红着脸说了句讨厌啊&#xff0c;然后坐在我身边不动&…

vue项目打包流程

vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件&#xff0c;在vue.config.js文件里面抛出一个对象&#xff0c;然后把下面两段代码写到对象里面&#xff0c;然后在控制台或者终端通过npm run build命令&#xff0c;打包项目 注…

mybatis嵌套循环map(高级用法)

前言&#xff1a; mybatis有默认的list&#xff0c;array&#xff0c;但是没有默认的map。所以不能直接写collection"map"&#xff0c;如果这么写&#xff0c;它会当成是根据map.get(“map”)来取value值&#xff0c;大部分情况下是一个map中是不会有“map”这个key的…

mybatis中循环map集合操作

首先声明一个MAP集合&#xff0c;用来存放数据&#xff1a;如下图&#xff1a;声明map集合pd&#xff0c;将数据put到pd中&#xff0c;然后在声明一个map集合params&#xff0c;将pd几个放入params集合中&#xff0c;将params作为参数&#xff0c;参入xml配置文件中&#xff1a…

IDEA循环MAP的快捷键和自己常用的循环MAP方式

IDEA循环Map的快捷方式&#xff0c; IDEA 快捷键 map.keySet().iter 循环输出Map的key键 IDEA 快捷键 map.values().iter 循环输出Map的key的value值 // 循环map for (String s : map.keySet()) { // 输出map中key System.out.println(s); // 获取map中key的value map.get…

java for循环中map_Java用For循环Map

欢迎进入Java社区论坛&#xff0c;与200万技术人员互动交流 >>进入 根据JDK的新特性,用For循环Map,例如循环Map的Key java 代码 for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); } 这里要注意的是,paraMap是怎么样定义的,如果是简单的Map para …

js 循环 map

js 中&#xff0c;循环 map &#xff0c;遍历取值&#xff0c;需要用 of

整理了81个Python实战项目列表,都有完整且详细的教程

学会Python&#xff01;它是一门可多方面发展就业的语言&#xff0c;如果你还处于迷茫期&#xff0c;那就玩玩这九九八十一个项目练练手~ 1 基于机器学习的花卉图片识别 2 电商数码产品销售数据分析与可视化 3 多实惠购物网站前端功能设计实现 4 电商数码产品销售数据分析与可视…

判断指定程序是否正在运行的Python实战代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

OpenCV-Python实战(2)——图像与视频文件的处理

OpenCV-Python实战&#xff08;2&#xff09;——图像与视频文件的处理 0. 前言1. 图像与视频文件处理基础2. 图像的读取与写入2.1 在 OpenCV 中读取图像2.2 使用 OpenCV 写入图像2.3 计算机视觉项目处理流程示例 3. 读取相机画面和视频文件3.1 读取相机画面3.2 访问捕获画面对…

Python实战:批量修改文本文件

Python实战&#xff1a;批量修改文本文件 sub方法、listdir方法、with open as 函数的实战用法 一、需求&#xff1a; 目前我们有一个文件夹&#xff0c;里面有爬虫抓取的txt文档1000篇&#xff0c;但是由于抓取格式问题&#xff0c;每篇文章之后都有几行相同的乱码现在我们…

Python实战,爬取金融期货数据

大家好&#xff0c;我是毕加锁。 今天给大家带来的是 Python实战&#xff0c;爬取金融期货数据 文末送书&#xff01; 文末送书&#xff01; 文末送书&#xff01; 任务简介 首先&#xff0c;客户原需求是获取https://hq.smm.cn/copper网站上的价格数据(注&#xff1a;获取的是…

20个Python实战项目(附源码),拿走就用。

Python是目前最好的编程语言之一。 由于其可读性和对初学者的友好性,已被广泛使用。 那么要想学会并掌握Python,可以实战的练习项目是必不可少的。 接下来,我将给大家介绍20个非常实用的Python项目,帮助大家更好的学习Python。 大家也可根据项目的需求,自己构建解决方法…

这4个Python实战项目,让你瞬间读懂Python!

前言 Python 是一种极具可读性和通用性的编程语言。Python 这个名字的灵感来自于英国喜剧团体 Monty Python&#xff0c;它的开发团队有一个重要的基础目标&#xff0c;就是使语言使用起来很有趣。Python 易于设置&#xff0c;并且是用相对直接的风格来编写&#xff0c;对错误…

验证email的Python实战代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

python实战—考勤报表数据分析处理

标题python实战—考勤报表数据分析处理 需求&#xff1a; 在部分考勤报表导出来的数据中&#xff0c;会出现多次打卡的记录&#xff0c;即excel同一单元格中会有多个时间记录&#xff0c;而Excel本身无法只能进行2个数据分列。 -存在员工忘记打卡&#xff0c;漏打卡、迟到早退…