关于Vue打包之后文件路径出错的问题

最新推荐文章于 2024-09-27 15:46:53 发布

置顶 been_7

最新推荐文章于 2024-09-27 15:46:53 发布

阅读量9.7k

点赞数 4

分类专栏：日常问题文章标签： vue vue-cli 生产环境路径打包路径文件路径出错

本文链接：https://blog.csdn.net/qq_37319220/article/details/79033648

版权

日常问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里以vue-cli创建的项目为例

1、文件路径不对

找到config文件夹下的index.js文件修改一下位置

看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’

2、背景图片路径不对

在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下位置

加入红框内字段即可。希望对新手有所帮助

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

been_7

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发

2401_83739434的博客

04-08

1254

2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},

解决Vue打包之后文件路径出错的问题

11-29

这里以vue-cli创建的项目为例 1、文件路径不对找到config文件夹下的index.js文件修改一下位置看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’ 2、背景图片路径不对在css中写的background-img的路径出错需要找到build文件夹下的utils.js,修改一下位置加入红框内字段即可。以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

2 条评论您还未登录，请先登录后发表或查看评论

Vue打包为相对路径

09-27

1224

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

解决vue打包后静态资源路径错误的问题

2401_84435555的博客

04-27

2024

页面中引入资源的方式往往有如下几种* HTML标签中直接引入图片，如* JS代码中定义资源路径属性，如* CSS代码中定义资源为背景图片，如上述三种资源加载方式还是有所区别的。前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图片加载失败，同时报出如下错误。

vue打包上线后路径不对

qq_42074281的博客

03-13

1085

打包上线后出现的各种问题汇总 1.图片样式加载不了进入build/utils.js，配置如下, if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../.....

关于Vue背景图打包之后访问路径错误问题的解决

08-28

Vue背景图打包之后访问路径错误问题的解决在 Vue 项目中，背景图打包之后访问路径错误的问题是很常见的。这个问题的出现是因为 url-loader 的配置对图片的限制大小过小造成的。当图片小于 10KB 时，url-loader 会...

vue打包静态资源后显示空白及static文件路径报错的解决

11-19

今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家打包之后打开dist的页面显示空白：这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...

vue3打包后css和js的路径不对问题

chencaw的专栏

11-16

4798

参照官网后发现正确方法部署 | Vue CLI 比如，我要把打包好的项目放在XXXXX.cn/chen/vue3下面（1）需要在vue.config.js的文件中做如下设置 module.exports = { //用于打包后修改路径，陈，最后上传时使用的设置，20211116 //参照了官网用法https://cli.vuejs.org/zh/guide/deployment.html#github-pages publicPath: process.env.NODE_ENV.

解决vue-cli项目打包出现空白页和路径错误的问题

青春木鱼的博客

01-01

2059

解决vue-cli项目打包出现空白页和路径错误的问题

vue 打包后 static 中图片路径不对的问题，腾讯T2大佬手把手教你

2401_84139728的博客

04-11

758

没错，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】如果是部署在，并不会出现什么问题，因为你的资源文件放在static中，然后你在引用的时候，都是这样的路径来引用（不管是css中，还是template中），这样是不会有任何问题的。大家看到我这个项目的访问路径，应该就知道，我这是属于【】部署的情况。那么在部署的时候，就有可能出现本文要说的这个问题【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是部署。

Web前端最全vue 打包后 static 中图片路径不对的问题，前端view绘制流程面试

2401_84616533的博客

05-08

710

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】与此同时呢，由于我们在 css 中使用了相对路径来引入图片。那么，打包后，我们的 css 会抽离出来为一个单独的 css 文件，这个时候， css 和图片之间的一个相对路径关系就改变了。为了解决这个问题，我们需要在中，增加一个pablicPath的配置，示例代码如下：publicPath: ‘…/…/’ // 作用是设置打包过程中提取css的方法})} else {这个时候，就解决了打包后图片路径404的问题了。

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

weixin_45016440的博客

08-10

578

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

vue 打包后找不到路径

周家大小姐

01-07

3451

在打包后发现点开dist方件;浏览器中一片空白; 我们需要在config文件下的把 assetsPublicPath: "/", 变成: assetsPublicPath: "./", 这个可以让他变成相对路径把: productionSourceMap: ture, 变成: productionSourceMap: false, 因为这个东西在打包的时候会给你生成很多Sour...

vue build 后资源路径不对

令瑞斌

10-14

9923

vue 打包后资源路径不对，本质是配置错误。在index.js中，要分开配置build 与dev时的路径。图上是我的资源目录，图下是我的配置文件dev 下，不需改动配置，run dev 即可。 build时，将assetsPublicPath 的路径换成服务器上对应的根目录。如我的项目在服务器上路径为XXx.hive.cn/vue/ 。直接访问XXx.hive.cn/vue/index.

2401_84617731的博客

05-07

585

指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64。跟C,Java中的this有什么区别？js的基本类型有哪些？事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？显示原型和隐式原型，手绘原型链，原型链是什么？14.说一下 Vue 和 React 的认识，做一个简单的对比。13.route 和 router 的区别是什么？

vue 打包文件路径不对解决方式

Huang_wf

10-09

4360

npm run build 打包后报错解决方式 assetsPublicPath: './' 这里加个前缀这里加一行 publicPath:"../../" vue-cli3 需要在vue.config.js 文件中配置 module.exports = { baseUrl: process.env.NODE_ENV === 'p...

Vue项目打包常见问题整理

weixin_30920853的博客

12-27

215

Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。 1、js 路径问题脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’ 1 build: { 2 assetsPublicPath: './' 3 } 2、im...

vue2 打包后 dist文件路径出错

03-30

可能是你的配置文件中没有正确设置打包后的文件路径，或者在使用时没有正确引用路径。如果你使用的是 vue-cli，可以检查一下 `vue.config.js` 文件中的配置是否正确设置了 `outputDir`，例如： ``` module....