Vue cli 3.0 如何修改assets 路径为相对路径（解决Vue项目打包后打开index.html页面显示空白以及图片）

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

#vueCli

博客指出，将baseUrl配置修改为'./'，页面即可正常显示，这是一个与前端开发配置相关的关键操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

修改baseUrl配置为’./’    即可正常显示页面

Vue-cli打包将所有资源改为相对路径
zxd的博客
12-18 3470
Vue-cli打包将所有资源改为相对路径 今天遇到一个为题，说要将vue-cli打包好的文件随便放哪里都能运行？一脸蒙逼。。。,问了一下度娘，有了思路，因为vue-cli打包后原来请求的都是绝对路径，并且所有资源除了请求都已经写好了，都是静态资源，那么只需将打包时的绝对路径改为相对路径即可。 开始 在vue-cli3.0后，需新增vue.config.js文件，放在package.json同级，在...
Vue CLI 3.3+版本 build后打开index.html 文件空白的解决方案
smildwind的博客
05-14 2135
Vue CLI 3.3+版本 build后打开index.html 文件空白，在控制台里查看原因，发现是js文件丢失引起的，下面上解决方案 在package-lock.json的同级目录下，新建一个文件 命名为 vue.config.js 在官网的解释是，设置 publicPath:'./'即可使用相对路径，但是实际测试发现，设置为 ./ 无效，但是发现设置成 ././ 两个./的时候，再次编译，发现index.html里的引用变成相对路径了，可能Vue cli3.3自己吞掉了头两个字符吧 ╮(...
vue-cli创建的项目部署在相对路径，你需要做这些。
weixin_34347651的博客
07-26 752
如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。 你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。 改成相对路径，主要需要做两步。 1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'...
Vue3 项目打包
最新发布
likuoelie的博客
06-20 1379
Vue3 是一个流行的 JavaScript 框架，用于构建 Web 应用和用户界面。项目打包是将开发环境代码编译为生产环境的静态文件，适合部署到服务器。调研发现，Vue3 项目通常使用 Vite 作为构建工具，替代了传统的 Webpack。打包命令为vite build，生成dist目录。调研中，菜鸟教程、Vite 官方中文文档和 优快云 博客提供了丰富的中文资源，适合初学者和高级开发者。Vite 允许通过自定义打包选项，位于项目根目录。常见配置如下：配置项描述示例base。
vue 打包配置相对路径
qq_44663401的博客
06-01 3111
vue 打包配置相对路径。
vue/cli3 配置相对路径
weixin_30483495的博客
03-08 3439
根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { config.resolve.al...
关于Vue项目中打包时，资料路径需要切换至相对路径的问题
engineer_why的博客
10-15 3378
在网站的访问中，如果静态资源使用了绝对路径，那么它始终以当前网站作为访问的根节点。就是绝对错不了的路径，始终以一个固定的目录作为起点。容易错，可以是任意一个目录节点作为起点。
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径错误的问题是很常见的。这个问题的出现是因为 url-loader 的配置对图片的限制大小过小造成的。当图片小于 10KB 时，url-loader 会...
解决Vue打包后访问图片/图标不显示的问题
01-19
大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题， 接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕，因为都是打包压缩过...
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的几个配置文件内的static更改为你自己所创建的静态资源目录，由于网上大多教程所改的地方都不够完全，还是会出现该问题，
vue打包静态资源路径不正确的解决办法
weixin_30733003的博客
11-03 1324
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个 1、js，css路径不对 解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 2、css中引用的图片资源找不到 我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的 .login{height:100%;backgrou...
使用vue-cli3，配置打包文件的相对路径
热门推荐
weixin_43660626的博客
08-05 1万+
默认情况下打包出来的文件都是绝对路径； 设置相对路径的方法为： 修改vue.config.js文件内的publicPath属性，将其改为如下所示（默认为’./’） publicPath:"././", 大功告成！！！ ...
vue3 可修改配置及引用相对目录
Henry_Wu001的专栏
04-12 1396
1）可修改配置 在index.html里添加一个config.js， 并在config.js中定义 window.GlobalConfig = { API_SERVER_URL: "http://xxx", other: { dev: false, sceneId: 226, baseUrl: "", }, }; 需要注意的事，引用的config.js要放在打包生成的*.js前面,放在title前面是成功的，titl.
vue 打包后 部署nginx 二级路由 刷新页面，js 报错导致页面空白
一个在全能之路上越走越远的男人。
08-14 2604
vue 的history 模式是很有必要的，可以删掉路径中的# 号，尤其是做微信开发，微信那边会自动把#给除掉。所以一般都设置成history的模式。但设置成history 的模式，会导致很多问题。 最近我就碰到一个这样的问题：如题目 。 仔细看上图出错的路径，这个路径刷新会在当前路径下找 js,很明显这个二级路由的路径下是没有的 static的，所以报错。 再看下我的打包配置： ...
vue-cli3.0.4中，webpack的dist路径修改方法
大赚万万亿
12-19 3612
修改的文件在 node_modules\@vue\cli-service\lib\options.js 如图，baseUrl最后一个路径名字要和outputDir的名字相同 修改后的路径结果  另外assetsDir如果有值，那么会把js,css,img之类的静态资源放到该值对应的文件夹里去 填了值 ...
vue修改index.html无效,vue在index.html中引入静态文件不生效问题及解决方法
weixin_34199121的博客
06-04 1299
本文针对的是Vue小白，不喜勿喷，谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html)出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static第二种可能出现的原因就是有单独的静态资源...
vue index.html 引入外部 js
tang_jian_dong的博客
05-27 3453
有时候需要引入外部js, 或者需要全家依赖的js, 可以在index.html 中引入： 如下红色框： /是指的assetsPublicPath 指的 代表打包后，index.html里面引用资源的的相对地址。 参考博客：https://blog.csdn.net/weixin_33920401/article/details/87962115 ...
Vue CLI3项目路径问题详解与解决
"Vue CLI3搭建的项目中路径相关问题的解决" 在Vue CLI3搭建的项目中，路径问题经常困扰开发者。这篇分享主要探讨了如何有效地处理这些路径问题，为开发者提供参考。Vue CLI3是一个强大的脚手架工具，用于快速初始化...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值