vue-cli项目打包路径有误

最新推荐文章于 2024-03-16 17:12:32 发布
最新推荐文章于 2024-03-16 17:12:32 发布
阅读量272 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue项目配置 文章标签： 打包路径有误 vue-cli项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenshiyafeiping/article/details/97749918
本文解决了一个常见问题：在项目开发阶段一切正常，但在打包后出现样式无法生效或页面空白的情况，通过调整配置文件中assetsPublicPath的值，从'/ '改为'./'，成功解决了路径错误导致的问题。

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

1、问题重现：项目在开发阶段没有问题，打包之后样式部分无法生效或者页面空白，报路径错误，具体如图所示
在这里插入图片描述
2、解决问题：将config\index.js中的build对象下的assetsPublicPath: ‘/’,改为assetsPublicPath: ‘./’，即可解决该问题
在这里插入图片描述

解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
Vue-cli打包后部署到子目录下的路径问题说明
10-14
这样，Vue CLI 在打包时会按照这个路径来处理相对路径，确保资源能正确加载。 2. **修改路由配置**： 在 Vue Router 配置中，有一个 `base` 属性，它定义了应用的根路径。同样，为了适应子目录部署，需要将 `base`...
vue-cli打包后运行报路径错误
hua_ban_yu的博客
05-25 1209
使用vue-cli打包好的项目放到tomcat下，新建一个目录存打包好的文件，发现报js、css路径错误。解决方案：1.打开config文件夹下的index.js文件，index.js文件有两个assetsPublicPath熟悉，build里面的assetsPublicPath属性，把 assetsPublicPath: '/'修改为 assetsPublicPath: './'  2.改好之后...
记录点滴：vue-cli项目打包后资源引入路径不正确的解决方法
weixin_40897685的博客
11-07 1343
**1.打包后html页面引入的css，js文件路径不正确：** 找到config文件夹下的index.js文件，将build下的assetsPublicPath: '/'改为assetsPublicPath: './' ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181107201919428.png?x-oss-process=image/w...
vue-cli 2 打包前和打包后的css前缀不一致的问题
weixin_34218890的博客
08-23 294
啰嗦一哈 最近基于vue-cli2 学习webpack，将vue-cli2的webpack配置强撸了一遍，感觉身体已被掏空。。。但还是收获不少的，起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一些常用插件的用法等。 问题来了 基于vue-cli不用自己配置webpack开撸项...
解决vue项目配置测试环境后打包静态资源路劲错误
jared.wang
12-10 1355
因为项目需要配置几个测试环境,以及生产环境，所以使用了 process.env.NODE_ENV 和启动命令 来区分打包的环境是哪一个。 完成后发现一个问题：当 输入 npm run test时 打包后的路径缺失了 config/index.js 里面的 assetsPublicPath 路径配置 assetsPublicPath 失效原因: 在build.js 文件的开头, 将环境命名改为 ‘testing’ process.env.NODE_ENV = 'testing' 解决 assetsPu.
在jsp页面如果运行时路径错误解决方法
weixin_30776273的博客
06-10 586
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <base href="<%=baseP...
vue-cli中打包图片路径错误的解决方法
08-29
但是，在使用vue-cli打包图片时，可能会出现图片路径错误的問題，这篇文章将为大家介绍如何解决这个问题。 问题描述 在使用vue-cli构建项目时，第一次打包部署到服务器上时，可能会出现图片加载不出来的情况。这种...
使用electron将vue-cli项目打包成exe的方法
10-17
本教程旨在引导已有一个Vue项目并希望将其打包成exe文件的开发者，进行一系列打包操作。 首先，介绍如何使用Electron的两种主要打包工具：electron-packager和electron-builder。Electron官方推荐使用electron-...
详解webpack+vue-cli项目打包技巧
08-30
详解webpack+vue-cli项目打包技巧 在本篇文章中，我们将详细介绍如何使用webpack和vue-cli来进行项目打包，并提供了一些有用的技巧来优化打包过程。 首先，让我们来看一下项目打包的重要性。在现代web开发中，项目...
解决vue-cli 打包后静态资源路径不对的问题
weixin_30725315的博客
12-07 706
项目基于vue-cli搭建的，都会自动配置一些打包的参数。在实际项目中，可能会用到static下的静态图片。 打包出来后，图片加载错误。查看图片路径发现有双层的static/css/static/images。很明显是打包的时候，路径配置的不对。 可以通过添加publicPath:"../../"解决该问题：需要修改build文件夹下的utils.js代码，如图所示： publicP...
vue项目打包后本地无法查看
qq_45175539的博客
03-24 1771
vue项目打包后本地无法查看 浏览器显示空白，报错显示： vue.config.js中配置publicPath: ‘./’,依旧无效 publicPath: './', 推测可能是vue脚手架版本太高，不兼容vue2的项目 解决方案 安装http-server，在项目根目录运行http-server 文件管理器中打开项目目录，在地址栏输入cmd可快速打开cmd并定位到当前目录 npm i http-server -g ...
vue打包相对路径，设置publicPath没作用解决方法
ejunda的博客
10-18 2671
不知道为什么会导致，publicPath没有生效。transpileDependencies这个属性，
vue url-loader 打包图片资源，会多出图片， publicPath没起作用
m0_52946104的博客
09-23 818
vue url-loader publicPath 不起作用
vue3项目打包遇到问题以及解决方法
weixin_44234920的博客
05-26 1939
1、问题：vue3 项目打包后，运行起来页面是白的，没有任何东西 解决方法： 1、在vue.config.js中添加如下代码 module.exports = { // 放置生成的静态资源的（outputDir）目录， outputDir就是生产环境构建文件的目录名设置 assetsDir: 'static', // 是否为 Babel 或 TypeScript 使用 thread-loader。 parallel: false, // 开发、部署时的 URL
VUE打包部署时遇到的坑
爱吃rabbit的mq
06-13 707
1.config/index.js文件 //assetsPublicPath: '/',原始的 assetsPublicPath: './',//更改后 2.router/index.js文件 如果启用了mode:‘history’,一定要注释掉，不然路由不好用
vue项目配置测试环境打包后报错
lonsole的博客
12-13 926
将 webpack.prod.conf.js 文件中的 ouput下的 path：config.build.assetsRoot 改为 publicPath: './ ![在这里插入图片描述](https://img-blog.csdnimg.cn/b626439cce634fc588df490799f043ae.png 打包后iconfont文件路径解决
Vue中publicPath导致通过URI区分环境部署失败、Vite 和 Webpack 的区别 以及 Bootstrap 本地资源文件不生效的问题
最新发布
本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。
03-16 803
在使用Nginx代理一个已经部署好的 Vue 项目时，发现线上环境正常，但是测试环境中使用域名代理却是空白页，查看源码发现线上环境和测试环境的区别在于，线上环境加载的资源如 app.js 使用的是相对路径，而测试环境使用的是绝对地址，从而导致资源加载不正常。这就回到了 Vue 中 vue.config.js 配置文件中的 publicPath 配置选项，这个配置默认为空或者设置为 ./ 相对目录，从而让 Vue 根据项目的部署位置自动加载对应在资源文件。
vue-cli项目打包出现空白页和路径错误问题
qq_39704803的博客
11-10 301
vue-cli4 1. 首先要有vue.config.js 配置文件，我这是简单的一些配置 const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : './', outputDir:'dist', chainWebpack: (c.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值