vue-cli打包访问静态资源404解决方案

最新推荐文章于 2024-06-06 15:52:11 发布
最新推荐文章于 2024-06-06 15:52:11 发布
阅读量1.3w 收藏 2
点赞数 2
分类专栏： Vue 文章标签： vue-cli vue webpack 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30455841/article/details/81240290
版权

使用vue-cli生产打包，把代码放到服务器上访问的时候，不少同学会看到页面一片空白，打开控制台，会发现是某些资源文件找不到，如图：
这里写图片描述

其实这里是因为vue-cli的webpack打包配置静态文件访问路径不对，配置文件路径如图：
这里写图片描述
在这个文件下面找到生产(build)配置：
这里写图片描述
要解决静态文件访问路径问题只需要修改配置中的assetsPublicPath字段即可。

如果你的服务器静态文件路径是这样的：

  • apache-tomcat-8.0.47
    • webapps
      • staticFile
        • mobile
          • index.html
          • static

将路径写成这样即可访问静态资源：
这里写图片描述

资源访问成功状态：
这里写图片描述

PromiseKeeping
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
15--vue自写组件：我的信息页（模板），404页面
xu_ze_qin的博客
05-13 3115
1、首先在components下面建一个目录CellItem.vue(注意要两个字母大写)如图： 2、组件要实现的效果： 3、讲一下代码的含义吧~~ 外层使用 li 标签来写，click事件是跳转事件；要记得methods方法要在data方法的后面！下面就是有一个img可以引入图片（下面一篇博客讲图片的引入和插槽），v-if判断是否出现，props可以传递静态或动态的值。 <template> <li class="cell-item" @click="go"> <i
使用vue-cli打包过程中的步骤以及问题的解决
08-27
以上就是使用Vue CLI打包过程中的主要步骤和可能遇到的问题及解决策略。遵循这些步骤，可以确保项目的顺利打包并部署到生产环境。在实际开发中，可能还会遇到其他问题，需要根据具体情况进行调试和优化。
微前端 qiankun webpack打包后静态资源路径404问题解决
weixin_45020094的博客
12-07 6395
首先出现静态资源加载失败的原因是路径问题， 子应用的路径被父应用影响，解决方法 你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url { output: { publicPath: `//localhost:${port}`, } } 借助 webpack 的 url-loader 将字体文件和图片打包，小文件转 base64 ，大文件注入路径前缀 vue cli2写法 const publicPath = process.env.NODE_ENV ===
vue2从0开始打包发布npm包，踩坑无数，完整版
最新发布
qq_45624939的博客
06-06 1092
初始化的package.json中“name”参数就是要发布的npm包的名字，必须是唯一的，可以去npm官网搜一搜有没有重名的；三、假设两个.vue文件就是我们想要打包的组件，我们要先将他们暴露出去，在项目的根目录（src同级）或src/components文件夹中新建一个文件index.js。这时候，项目就成功启动起来了，打开链接 http://localhost:8080 ，就可以看到我们的项目了。按回车后，大概需要5分钟，甚至更久，才会新建成功，慢慢等待。至此成功，真是踩了无数的坑！
vue项目打包之后部署访问静态资源全都404
天弃的博客
06-25 2114
问题 vue项目npm run build之后打包生成的dist文件夹，部署到服务器上访问静态资源全都404 解决 找到项目的vue.config.js文件 module.exports = { // 选项 publicPath: "./", outputDir: "dist", assetsDir: "assets", indexPath: "index.html", runtimeCo
Vue部署防止直接访问页面刷新404问题 配置宝塔纯静态conf即可
m0_48643017的博客
11-29 147
Vue部署防止直接访问页面刷新404问题 配置宝塔纯静态conf即可
Vue2创建404页面
weixin_55034383的博客
08-13 1440
Vue2创建404页面
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标...
解决vue-cli webpack打包后加载资源的路径问题
10-17
首先，当你的Vue项目在打包后出现访问空白的情况，这通常是因为静态资源（如CSS、JS、ICO等）无法正确加载。问题可能出在`dist`目录的结构上。在默认配置下，Webpack会将生成的静态文件放在`dist`目录下，而`index....
vue-cli 打包使用history模式的后端配置实例
10-17
Vue CLI 是一个强大的脚手架工具，用于快速搭建 Vue.js 应用程序。在开发过程中，我们经常使用 hash 模式来处理...如果服务器不支持，或者你无法修改服务器配置，那么你可能需要寻找其他解决方案，如设置服务器代理等。
自定义404错误页面模板
01-23
自定义404错误页面模板
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
简单漂亮404错误页面模板.zip
05-27
简单漂亮404错误页面模板，抱歉，找不到此页面~你请求访问的页面，暂时找不到，我们建议你返回首页官网进行浏览，谢谢！有进入官网首页按钮链接。
小清新简单404错误单页(含自动跳转) 404页面模板 404跳转代码
11-25
小清新简单404错误单页(含自动跳转)是一个纯html的跳转页面，适合大部分网站进行使用。 特点： 1、小清新简单404错误单页 2、含自动跳转进度条 3、只需要修改自动跳转定向域名就可以正常使用
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE前端代码打包后上传到服务器上js css 文件404
Jack_13201的博客
11-14 2630
VUE前端代码打包后上传到服务器上js css 文件404 一：问题现象 用服务器网址访问后，出现js css 文件404 二：问题产生原因 1：前端项目是打包完成后传给后台，打包的时候所有的文件路径都是绝对路径 2：讲道理目录不能有什么/monitor，不用跟后缀的，就可以直接访问项目的index.html文件 三：解决办法 在webpack中加上一句话 // moitor 是后台自己加的...
vue访问本地public文件夹下面的文件 404
云
07-19 1135
vue访问本地public文件夹下面的文件 404
vue项目 在thinkphp目录下 route 二级路由刷新404的问题
leiliang520130的专栏
02-09 306
在nginx加入 location /web { try_files $uri $uri/ @router; index index.php index.html index.htm default.php default.htm default.html; } location @router { rewrite ^.*$ /web/index.html last; }
vue-cli 打包的静态文件不能直接访问
01-25
Vue-cli打包的静态文件不能直接访问是因为Vue-cli默认将打包后的静态文件存储在项目根目录下的dist文件夹中，而dist文件夹并不具备服务器功能，无法直接访问其中的文件。 为了解决这个问题，我们需要将dist文件夹中...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值