vue打包路径设置

article/2025/9/3 20:05:23

vue 打包路径设置

  • vue打包默认路径
    • css中图片路径等
    • 线上不显示工程源码

vue打包默认路径

1.vue打包之后的默认路径是从根目录开始算的,如果你的项目并不是根目录,而是子目录,这种设置就会导致路径错误,
解决方法:修改config/index.js下面的代码,将assetsPublicPath: '/'跟路径修改为assetsPublicPath: './'当前文件夹路径
在这里插入图片描述

css中图片路径等

解决之后,发现组件中的css的背景图片路径不对,无论放到static还是assets里面,最后解析出来的都是/static/img/static/img/…; 很显然最后的结果图片都会打包进static里面,路径也会修改为根路径,但是在css中被当做是相对路径了
在这里插入图片描述

解决方法:修改在build/utils.js中代码,添加路径为…/…/;解析之后会变成…/…/static/xxx…,相当于将文件目录前移两层文件夹再向下获

在这里插入图片描述

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} 

线上不显示工程源码

在这里插入图片描述

productionSourceMap:false,  // 设置上线后是否加载webpack文件

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

相关文章

Vue项目打包部署

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

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

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

vue 打包的方式

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

vue项目打包流程

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

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

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

mybatis中循环map集合操作

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

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

IDEA循环Map的快捷方式, 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社区论坛,与200万技术人员互动交流 >>进入 根据JDK的新特性,用For循环Map,例如循环Map的Key java 代码 for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); } 这里要注意的是,paraMap是怎么样定义的,如果是简单的Map para …

js 循环 map

js 中,循环 map ,遍历取值,需要用 of

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

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

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

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

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

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

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

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

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

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

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

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

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

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

验证email的Python实战代码

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

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

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

python实战-读取xlsx表格批量替换文件名

文章目录 一、前言二、解决思路三、具体代码实现四、总结 一、前言 ​  一位在校当老师的同学遇到了一个需求,学生1寸照片是以学生姓名命名,现在需要重命名1寸照片,重命名为exel里对应的学生姓名的身份证号码,我心想这个需求很…

百看不如一练, 247 个 Python 实战案例!

众所周知,我们在学习Pyhont过程中,大都看书枯燥、看视频进度慢,网上查找的学习案例又比较凌乱不成体系。。。 百看不如一练,今天为大家搜集了一份Python从入门到进阶的实战案例合集,共计247个案例,185页内容…