vue打包之后修改静态资源路径

最新推荐文章于 2024-05-12 07:06:45 发布
最新推荐文章于 2024-05-12 07:06:45 发布
阅读量2.2k 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangYi0118/article/details/109229258
版权

npm run build打包之后生成dist文件夹，访问index.html的时候控制台打印
打包之后报错在这里插入图片描述
1：修改build下webpack.prod.conf.js
在这里插入图片描述
2：修改build下webpack.base.conf.js
在这里插入图片描述
3：修改config下index.js
在这里插入图片描述
4：我的项目静态资源的位置在src下的assets文件夹里，引入了背景图打包之后不显示
修改build下utils.js
在这里插入图片描述
在这里插入图片描述

若我君临天下
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包路径更改_vue项目之webpack打包静态资源路径不准确
weixin_28673669的博客
01-14 748
摘自：https://blog.csdn.net/viewyu12345/article/details/83187815问题将打包好的项目部署到服务器，发现报错说图片找不到。静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路...
vue修改打包后静态资源路径
weixin_34110749的博客
12-15 1364
使用vue-cli生成的项目，打包方式是直接执行package.json里配置的脚本 npm run build // 这步其实是去执行build下的build.js脚本文件 node build/build.js 复制代码如果发布到服务器资源，该静态资源的路径都是默认在根路径下，大多数情况下是不符合期望的，还是希望放在指定位置。 这里只需要修改config文件夹下的生产环境配置文件pro...
2024年Web前端最新解决vue打包后静态资源路径错误的问题，2024年最新2024前端面试题
最新发布
2401_84435152的博客
05-12 1033
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】看代码：assetsPublicPath: ‘./’, // 修改为’./'满足资源相对路径2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue修改打包后静态资源路径的修改
weixin_42467515的博客
03-05 649
vue修改打包后静态资源路径的修改
vue-element-admin实现build打包文件下改变每个静态资源的路径
vvv3171071的博客
10-28 2756
组长两句话说明的需求，其实也简单，就改一行代码。 打开vue.config.js，找到assetsDir，默认输出路径是’static’，改成你想要将静态资源输出到的路径就可以了。我改成了’home/static’ // assetsDir: 'static', assetsDir: 'home/static', 然后打包后的dist里的静态资源就放到了dist/home/static目录下 题外话：这样做好像是利于Nginx的部署啥的，等这几天忙完项目后好好请教一下原理吧，太菜了，还得更加努
更改vue静态资源路径
猿是人类的好朋友
03-07 482
build: {})build: {},
vue项目设置打包后的静态文件访问路径
start_sea的博客
08-31 1万+
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...
Vue打包后访问静态资源路径问题
10-16
Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在本例中，设置为 `'./'`，意味着静态资源路径相对于当前目录。 ```javascript module.exports = { publicPath: './' } ``` **补充知识：** 1. **Vue CLI 3.0 打包配置**： 当运行 `npm run build` 命令打包...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
解决Vue打包之后文件路径出错的问题
08-27
1. **调整配置文件中的静态资源路径** 在Vue CLI项目中，配置文件位于`config`文件夹下的`index.js`。这里需要关注的是`build`对象下的`assetsPublicPath`属性。这个属性定义了产出文件的公共路径。如果设置为`'/'`...
nuxt+axios实现打包后动态修改请求地址的方法
11-20
需求：把请求地址等一些配置暴露出来以便打包后动态修改，而不需要重新打包编译。 这样也是挺不错的，当一个项目需要部署到几个不同的服务器上时候，就不用说每次都要修改后再重新打包。功能不变时，单单是修改一下请求地址省了不少功夫。 1.开始 把需要动态修改的配置写在一个配置json文件里面。该配置文件可以放在static目录下： 静态文件目录：静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 2.实现 在static下新建baseConfig.json文件,
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js ： module.exports = { router: { base: './' } } 打包后的文件： 补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题 nuxt静态部署问题 静态部署：路由模式跳转失效的问题；不能使用历史模式，需要使用 ‘hash’ 模式，再进行打包 ‘npm run generate’ 文件:nuxt.conf
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径错误的问题是很常见的。这个问题的出现是因为 url-loader 的配置对图片的限制大小过小造成的。当图片小于 10KB 时，url-loader 会...
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
热门推荐
vayne_1的博客
05-26 2万+
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 927
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue cli 3 打包静态资源路径配置，否则会出现404噢
初心 - 杨瑞超个人博客
03-19 1万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 根目录新建 vue.config,js module.exports = { publicPath: "./" } 这样就可以解决啦 ~ ~ ~ ...
图片打包进服务器变成html访问报错,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
weixin_34245159的博客
06-04 694
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请...
vue项目打包之后静态资源无法显示
03-31
可能是因为打包后的静态资源路径被修改了，需要修改配置文件中的静态资源路径。 1. 确认打包后的静态资源路径 在打包后生成的 dist 目录下查看静态资源的路径，如图片、CSS、JS 等文件的路径是否正确。 2. 修改静态资源路径 在 Vue 项目中，静态资源的路径一般是通过配置文件中的 publicPath 来设置的。打开配置文件 vue.config.js，将 publicPath 设置为 './'。 ``` module.exports = { publicPath: './' } ``` 如果静态资源存放在自己的服务器上，可以将 publicPath 设置为服务器的地址。 3. 重新打包项目 修改配置文件后，重新运行打包命令，将打包后的文件上传到服务器即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值