关于Vue项目中打包时,资料路径需要切换至相对路径的问题

Vue项目打包后本地运行index.html的终极解决方案 本文针对Vue项目打包后本地运行index.html出现空白页的常见问题,提供了终极解决方案。核心在于通过配置vue.config.js中的publicPath为‘./’以解决资源路径问题,并建议将Vue Router模式改为hash模式以确保路由在无服务器环境下正常工作,从而彻底解决本地运行难题。 阅读详情
AI摘要

文章讲述了在Vue项目打包过程中,如何将资料路径从绝对路径切换到相对路径,以及如何在vue.config.js中通过publicPath进行配置,同时提到publicPath与NODE_ENV环境变量的关系。

关于Vue项目中打包时,资料路径需要切换至相对路径的问题

绝对路径就是绝对错不了的路径,始终以一个固定的目录作为起点。
相对路径容易错,可以是任意一个目录节点作为起点。
在网站的访问中,如果静态资源使用了绝对路径,那么它始终以当前网站作为访问的根节点。

  • 在vue.config.js文件中添加publicPath配置,这个配置主要是进行资源路径的调整
moudle.exports={
	publicPath:"./",
	...
}
  • 在这里需要说明一下,publicPath的值绝对路径和相对路径有多种写法
    • 绝对路径
      • /
      • /filename
    • 相对路径
      • ./
      • .
      • ''
  • 另一点,publicPath还和public中index.html页面里的<%= BASE_URL %>有联系。
    • 默认情况下,它会根据publicPath来设置页面资源的路径
    • 我们还能对开发和生产两个环境,进行区分
    • 比如:publicPath:process.env.NODE_ENV === "production"?"./":"/",代表着,当是生产的环境的时候,会变为相对路径;当是开发环境的时候,又会切换为绝对路径,以站点为根目录。
Vue 项目打包 Vue项目打包 阅读详情

相关推荐

Vue打包后接口路径丢失问题解决方案

当Vue项目打包后接口路径丢失时,可以通过确认接口路径配置、使用相对路径、配置代理、配置环境变量或者检查打包配置来解决问题。如果你的接口路径是绝对路径,且在打包后的代码中丢失了,可以考虑配置代理来解决这个问题。如果你的接口路径是相对于打包后的代码的相对路径,可以尝试使用相对路径来配置接口路径。通常,我们会将接口的基础路径配置在项目的配置文件中,比如。在Vue项目中,如果在打包后的代码中接口路径丢失了,导致无法正常访问后端接口,可以采取以下解决方案。这样,在打包后的代码中,也会正确地使用配置的接口路径。

HackWhisper的博客 1052

vue 打包配置相对路径

vue 打包配置相对路径。

qq_44663401的博客 3205

解决vue单页面应用打包后相对路径、绝对路径相关问题

在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径。但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML、css、js等文件,使用的都是绝对路径。下面可以举几个例子来看一下: 1、打包后的index.html文件 2、打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1、修改webpack配置文件中的assetsPublicPath,修改为如下图所示。 修改配置后,进行打包发现,打包后的index.html文件中,对css等文件的调用,变成相对路径。 但是同时我们也会的发现这样修改后,导

Vue进阶(七十五):相对路径和绝对路径

绝对路径:是从盘符开始的路径,形如 C:\windows\system32\cmd.exe 所谓的绝对路径就是完整的路径。 相对路径:是从当前路径开始的路径,假如当前路径为C:\windows 要描述上述路径,只需输入 system32\cmd.exe 实际上,严格的相对路径写法应为 .\system32\cmd.exe 其中,.表示当前路径,在通道情况下可以省略,只有在特殊的情况下不能省略。 假...

IT全栈 华强工作室 9060

LwIP在国产MCU的落地实践:从协议栈优化到网络稳定性实战

本文详细介绍了LwIP协议栈在国产GD32F407 MCU上的移植与优化实践,涵盖硬件平台选择、驱动适配、协议栈调优和网络稳定性提升策略。通过内存管理优化、实时操作系统集成和性能测试,为工业物联网应用提供高可靠性网络通信解决方案,显著提升数据传输效率和系统稳定性。

m2n3b4v5c6的博客 270

3D slicer查看形变场

3Dslice显示数据和形变场 将需要可视化的数据也导入3Dslice,注意描述为volume(图1a),如果没有显示是因为路径中不能有中文,也就是moving图像。 (b) 图1、数据导入形变场和 将相应的形变场数据直接拖入3Dslice,并修改描述为形变场(图1b)。 点击transform菜单图2(a),然后勾选形变场可视化图2(b)。 (b) 图2...

fanre的专栏 1947

Vue打包为相对路径

对于更复杂的部署需求,可以编写自定义脚本来处理资源路径。通过上述内容,我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径,还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 2933

人工势场法在自动驾驶避障中的实践与优化

本文深入探讨了人工势场法在自动驾驶避障中的核心原理与实践优化。通过解析引力与斥力模型,揭示了经典算法在局部最优和目标不可达等问题上的局限性,并重点介绍了改进斥力场函数、引入道路边界斥力及动态参数调整等关键优化策略,有效提升了该局部路径规划算法在复杂动态场景下的实用性与鲁棒性。

weixin_29208327的博客 927

vue 打包生成配置文件,方便外部修改公共路径,不用每次都进行打包部署

Vue 打包后,如果想修改整体的后台接口域名,或者图片文件的路径,就需要在源代码中修改后,再次进行build打包。这样很不灵活,先看一下vue打包后的文件结构,项目打包后会生成一个dist文件 ── dist ├── static // 外部静态资源文件夹,对应项目中的static文件夹 ,与index.html同级 └── ind...

qq_41772754的博客 1万+

ADS8681数据手册没讲透的细节:SPI时序、量程切换与电压换算的避坑指南

本文深入解析ADS8681数据手册未提及的SPI时序优化、量程切换陷阱与电压校准技巧。针对树莓派5与ADS8681的SPI通信问题,提供CPOL/CPHA配置建议;详解量程切换的位操作玄机与寄存器配置流程;并提出三步校准法应对非理想供电环境,帮助开发者提升ADC测量精度。

weixin_29178069的博客 518

Windows 10下用vcpkg一键搞定libcurl开发环境(Code::Blocks 20.03配置指南)

本文详细介绍了在Windows 10系统下使用vcpkg工具快速配置libcurl开发环境的完整指南,特别针对Code::Blocks 20.03 IDE进行优化设置。通过vcpkg自动化管理依赖项,简化libcurl的安装与配置过程,帮助开发者高效搭建网络通信功能开发环境,并提供了常见问题解决方案和实际项目中的最佳实践。

weixin_28040125的博客 249

Vue history 资源路径处理问题

缘由 使用Hash Mode开发的一套大系统,完全成型 由于各种跳转的问题,nginx的转发会导致#后面的路径丢失 想试试History Mode 环境 Vue-Cli 早期版本,webpack 2.6 相关配置 基础配置 将Vue Router mode设置为history,并将跳转路径中带#的hash路由改为history对应的方式 webpack-dev-middleware 不带de...

GodYakhoo的博客 2899

详解FreeRTOS:FreeRTOSConfig.h系统配置文件(拓展篇—1)

FreeRTOS的系统配置文件为FreeRTOSConfig.h,在配置文件中可以完成FreeRTOS的裁剪和配置,这是非常重要的一个文件,本篇博文就来讲解这个文件。

不脱发的程序猿 1546

vue打包之后出现空白页的原因以及解决方式

路由模式 history 新建项目什么都不动,路由模式:history, 直接npm run build打包 打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的,应该用'./'而不是'/' 那怎么修改打包之后的路径呢?查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文

温情 3万+

R语言线性混合模型(LMM)分析

它将数据表示为固定效应和随机效应的线性组合,其中固定效应表示总体均值的影响,随机效应表示个体间的随机差异。LMM的目标是通过最大似然估计或最小二乘估计来估计模型中的固定效应和随机效应的参数。LMM结合了固定效应和随机效应,能够同时考虑个体间和个体内的变异,并适用于具有相关性的数据。目前在使用LMM的R语言包中,较常用的是lme4和nlme包,它们提供了丰富的函数和工具来拟合和分析线性混合模型。面板数据分析:LMM适用于分析具有面板结构的数据,如经济学中的面板数据或教育研究中的学生评估数据。

走向CTO的路上... 2968

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

spring-boot+vue项目使用 electron打包exe桌面项目,桌面端出现报错Failed to load resource: net::ERR_FILE_NOT_FOUND(解决)

阿丹:因为之前使用百度网盘开放平台进行开发,发现百度网盘只支持在桌面应用的开发上传,所以在使用electron打包vue之后运行出现这个问题如果要看到这个报错信息那么需要先打开控制台,可以先参考这个文章。

阿丹的博客 3283

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

Vue项目打包部署到Tomcat

废话不多说,直接进入正题 一.通常在开发环境下请求后台接口会用到反向代理,而在生产环境中反向代理是不生效的,那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作,更改配置文件去自动切换接口地址。 开发环境:在config文件夹下的dev.env.js中 添加这样一行代码 'use strict' const merge = require('webpack-merge') c...

尘生杜若 1万+

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

vue项目打包后出现图片引用路径错误的问题

根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系,可知大于10000B的图片被打包到了‘static/img’目录,所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’,在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’

weixin_45016440的博客 1340

vue 绑定图片相对路径

如上图所示,我们制作,tab切换功能,但是因为字体的原因,我们这里选择tab切换时,使用图片进行替换。但是 使用过程中发现一个问题,vue绑定图片“相对地址” 图片并不能展示出来。 完整代码部分: <template> <div class="zuop-award"> <div class="work-title"> <img src="....

马优晨 3968

Vue图片引用路径详解:相对路径、@别名与打包部署踩坑指南

在Vue工程化开发中,静态资源路径一直是高频疑难,特别是图片引用常导致404。理解src/assets与public目录的核心差异,掌握相对路径、绝对路径、@别名与~符号的各自适用层级,是构建可维护工程的基础。路径解析的底层逻辑涉及vue-loader、CSS加载器及模块解析器,动态绑定还需借助require或import.meta.glob在构建阶段处理。正确配置publicPath或base能解决子目录部署的经典坑位。本文从基础概念到实战排查,系统梳理Vue中图片引用的正确姿势,帮助开发者彻底告别打包后

weixin_34122604的博客 400

Vue静态资源路径完全指南:彻底搞懂相对路径、@别名与打包404

在Vue项目开发中,静态资源引用是每个组件都会遇到的基础操作,而路径写法直接决定了资源能否被正确加载。通常,资源存放于src/assets与public两个不同目录,二者在构建处理上有着本质区别。assets目录下的文件会经过Webpack或Vite编译,可能被转成base64或加上hash指纹;public目录则原样拷贝。理解这一编译期原理,是掌握相对路径、绝对路径、@别名及~前缀用法的关键。合理选择路径不仅能提升代码可维护性,还能避免打包部署后图片404、样式丢失等高频问题。无论你是使用Vue CLI还

weixin_34095889的博客 413

Web前端之Vue打包的坑、打包部署后页面空白、路由报错、无报错、懒加载、路径

Web前端之Vue打包的坑、打包部署后页面空白、路由报错、无报错、懒加载、路径

优快云博客主页地址:https://mengjian.blog.youkuaiyun.com/ 7411

vue 懒加载组件chunk相对路径混乱问题

问题描述: 在vue项目中用vue-router做路由,做代码分割和懒加载时,由于webpack配置不当,导致懒加载chunk时相对路径出现混乱导致加载chunk失败,具体如下: //router.js import VueRouter from 'vue-router' const A = () =&gt; import('./pages/a.vue'); const B = () =&gt...

novenn 5859

vscode相对路径导入vue.js失败,可以访问在线vue.js,导入相对路径资源文件失败

本地相对资源访问出错

weixin_57663206的博客 1321

electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白,打包后路由不跳转及请求不到后端数据等问题)

electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白,打包后路由不跳转及请求不到后端数据等问题)

qq_21280835的博客 3925
上一篇: css属性设置calc后(动态计算),不生效的问题
下一篇: Vue项目:将资源路径使用相对路径后,部分图片无法显示
engineer_why
博客等级 码龄6年 233粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

engineer_why

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值