vue-cli2打包后的文件中有本地文件路径

最新推荐文章于 2025-03-20 15:44:55 发布
原创 最新推荐文章于 2025-03-20 15:44:55 发布 · 996 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

博客提及打包后的文件存在问题，指出罪魁祸首，给出解决办法，即把cssSourceMap的值改为false，与前端开发相关。

打包之后的文件：
在这里插入图片描述
罪魁祸首是：在这里插入图片描述
解决办法：cssSourceMap的值改为false

webpack 打包第三方库里有图片，集成包的时候图片变成本地路径加载不上，追寻了半天终于解决了困扰很久的问题。
星宇大前端
01-10 1362
困扰很久的webpack 打包第三库含有图片，你是怎么解决的呢？我是这么解决的。
Vue-cli打包后部署到子目录下的路径问题说明
10-14
完成上述配置后，重新运行 `vue-cli` 的打包命令，生成的静态文件就可以在指定的子目录下正常工作了。这将帮助你的 Vue.js 应用在服务器的二级子目录下运行，同时解决了资源路径的问题。请记住，不同的服务器配置...
vue打包时的神秘路径
坚持原创
03-02 647
先看看项目结构 下图即本次要理解的神秘路径 实验开始 一 __dirname其实就是项目根目录下的config，怎么证明，把…/dist改成./dist dist被打包到config下了 二 assetsSubDirectory其实都是在dist目录下，怎么证明，把assetsSubDirectory的值改为’…/test’，打包后如下 项目根目录多了一个test目录，里面放着打包后的css，js文件 三 assetsPublicPath的根目录斜杠指的就是服务器根目录，怎么证明 先如下图配置.
vue项目打包后的资源路径问题
weixin_30301449的博客
10-18 1289
最近做的vue项目，本地测试完成后，build上线，却发现了文件路径问题，提示各种诸如js，css等资源找不到的错； 正确解决方式有两种，一种是绝对路径配置，详细可以网上查，个人推荐第二种相对路径，这样的话，项目迁移比较方便； 具体配置如下： 第一步： 要注意：是config/index.js下的build对象，不要改错了 第二步： 这个是在build/utils.js里。 ...
vue打包后路径问题解决
qq_32741973的博客
11-21 756
Vue 项目打包后路径问题的解决方法
最新发布
有我更精彩的博客
03-20 2268
Vue 项目打包后路径问题通常由静态资源路径错误、路由路径错误、环境变量路径错误或publicPath配置错误引起。通过正确配置静态资源路径、Vue Router 的base选项、环境变量、publicPath配置以及使用相关插件，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地处理打包后的路径问题，确保项目在生产环境中的正常运行。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》
vue-cli 项目打包完成后运行文件路径报错问题
10-16
在开发环境中，Vue CLI 自动处理构建、热更新等各种任务，但在项目打包完成后，可能会遇到运行时的文件路径报错问题。这类问题通常与项目的输出目录设置、静态资源路径引用及服务器部署配置有关。 在 Vue CLI 2.x ...
关于vue-cli3打包代码后白屏的解决方案
10-14
在开发阶段，Vue CLI通常可以处理绝对路径，但在打包后，这些路径可能需要调整为相对路径。这可以通过修改`build/utils.js`文件中的CSS加载器配置实现，使其使用相对路径加载图片。 ```javascript // build/utils...
Vue-cli配置打包文件本地使用的教程图解
01-19
最近做的一个嵌入app的pc端项目，用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件，打包后的index.html加载文件如图：     url中的路径据我们所知，最前面为...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法正常显示图标。 在描述的问题中，我们看到打包后的字体文件位于`static/fonts`...
vue-cli 2 打包后的路径问题
weixin_34250709的博客
08-23 875
问题 本栗子是基于vue-cli2.9.6，当我们安装好vue-cli马上开始撸项目，npm run dev进入开发环境时是没有问题的，但当我npm run build 进行项目打包，打包好后浏览disk/index.html 项目时会发现有报错，是资源路径出错，如下 我们再看看index.html里的代码 这里所有的资源路径都是 /s...
vue打包后css路径_解决vue单页面应用打包后相对路径、绝对路径相关问题
weixin_39805364的博客
12-22 1168
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：1、打包后的index.html文件2、打包后的css文件所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？1、修改webpack配置文件中的ass...
ant-design-pro打包到非根目录
周18的碎碎念
01-10 766
vue.config下vueConfig里新增一行： publicPath:process.env.NODE_ENV===‘production’?’./’:’/’, 或者把./换成你部署的文件夹名字
【vue】npm run build打包路径问题
热门推荐
Y.Cheng的博客
06-08 5万+
直接插入主体 额不 主题 我的vue脚手架目录结构如下 有个config文件夹，在index.js中有两个方法一个开发dev,一个生产build。 　 - dev： 是我们的开发环境，资源使用绝对路径，所以可以正常看到背景图片 - build： 是我们的生产环境，资源使用相对路径，所以会报错 一：Vue打包js,css等的路径问题 我们打包自然要设置build中的代码了。下...
vue webpack打包后.css文件里的背景图片路径错误解决方法
张兴华的博客
11-01 2406
一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 publicPath: ‘./’, 即可，如图。 那么这样后，资源的引用路径就正确了...
VUE中项目打包出现的问题
Daisy_1的博客
08-05 1390
一、vue打包 npm run build 完成的项目后，在终端运行npm run build，会自动增加dist文件夹，里面包含static文件夹和index.html页面，其中static文件夹中是 打包后的所有js、css、img以及elementUI。 二、白板以及图片无法加载 运行index.html页面会出现白板以及错误，如下所示： 其原因是在打包的过程中直接将static直...
vue webpack打包后图片、js、css路径错误的完美解决方法
weixin_56242672的博客
07-27 5078
项目用rundevbuild打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
vue项目打包后路径问题
weixin_43756060的博客
03-14 2269
第一步： 选择第二项Manually手动选择特性 第二步 选择Babel / Router / Vuex / Linter/Formatter 整体选项如下 选择完成后回车根据提示进行下一步操作 执行完这些后我们另外打开一个命令行窗口运行npm run build会发现目录下多出个dist目录，但是目录中的index.html并不能正常运行,因为引入的js/css文件路径都不对； 为了能让...
vue项目设置打包后的静态文件访问路径
start_sea的博客
08-31 1万+
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...
Vue-cli 3 打包优化：路由懒加载与代码压缩
"关于vue-cli 3配置打包优化要点（推荐）" 在Vue.js开发过程中，使用vue-cli 3可以极大地提升开发效率。然而，为了提高应用的性能和加载速度，我们需要对打包过程进行优化。以下是一些关键的vue-cli 3配置打包优化...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值