vuecli3打包发布后无法访问静态资源（404）

最新推荐文章于 2024-07-02 20:37:40 发布
最新推荐文章于 2024-07-02 20:37:40 发布
阅读量1.1w 收藏 11
点赞数
分类专栏： 前端 vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36289377/article/details/108867404
版权
本文介绍了在VueCLI3或VueCLI4项目中，打包发布后静态资源出现404错误的原因及解决方案。问题源于publicPath配置为绝对路径，以及在使用vue-router的history模式时，未正确配置base路径。解决方法包括将publicPath改为相对路径，并在路由文件中设置base路径，同时提供.env.dev环境变量的配置示例。
摘要由CSDN通过智能技术生成

场景

vuecli3或者vuecli4项目，本地运行可以正常访问静态资源，打包发布到线上后，通过域名访问后无法访问到静态资源，也就是404

原因分析

1.配置的映射域名并不是在根域名下，而是在次一级的location下，而publicPath配置的却是绝对路径
关于publicPath的配置，vuecli官方给了详细的解决办法，即是把vue.config.js中的publicPath改成相对路径，网上大部分人都是这么说的，然儿并不能彻底解决这个问题。
https://cli.vuejs.org/zh/config/
在这里插入图片描述
2.为什么配置了还是无效，网上大部分都是讲到这一步请看上图的黄色部分，相对路径配置并不是都能生效的，如果你的项目还是不能访问静态资源，说明你使用了vue-router的history模式的路由，那么你需要在你的路由中配置中base路径，解决办法：

1.假设我的项目映射的域名是 http://www.baidu.com/log

在我的环境文件中增加环境变量

最低0.47元/天 解锁文章
tino.tang
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue-cli3项目打包时，静态资源请求失败 404
weixin_40141473的博客
08-16 8845
1. 首先放一张项目的目录： public文件夹 存放 index.html以及一些json文件。 src -> assets 文件夹下存放一些需要的图片。 src -> components 文件夹下存放每个模块的组件。 src 目录下是App.vue、main.js、router.js、store.js文件。 2. 在执行 npm run build 后，项目多了一个d...
解决 VueCLI3 项目打包上线刷新 404 的问题
hedeqiang
05-15 2646
最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。 但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。 最终经过一番搜索，解决方案如下： Nginx 例如使用 Nginx 部署，须做如下修改即可 location /{ error_page 404 /index.html; } 重启 Nginx 即可。 sudo service nginx restart Ap
Vue Cli 3 打包上线 静态资源404问题解决方案
二手程序员
06-29 4591
报错原因：静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath。 在根目录创建vue.config.js 文件 // 请把代码文本粘贴到下方（请勿用图片代替代码） module.exports = { publicPath:...
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 1230
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
最新发布
qq_52686989的博客
07-02 712
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
vue3+ts+vite打包后静态资源404无法加载js和css
weixin_59855825的博客
02-20 3402
vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置）在vite.config.ts中设置：base: "./"具体代码如下。问题1：访问的文件不存在，主要是因为路径配置问题。解决：在 vite.config.js文件中配置。访问的文件不存在，主要是因为路径配置问题。再次打包问题解决——
vue3+ts+history路由模式项目打包部署后刷新显示页面404
qq_57483942的博客
05-08 1250
最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案。
vue项目静态资源404报错(vue3)
beiTiao_lys的博客
03-22 1623
vue中静态图片404
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
这些静态资源在开发环境下通常不会有任何问题，但一旦进行部署时，可能会遇到访问这些资源时返回404错误的情况。 首先，需要了解public文件夹中的资源在构建应用时，会直接被拷贝到输出目录的根目录下，不会经过...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在使用Vue.js框架进行前端开发的过程中，经常需要打包应用以便将其部署到生产环境中。...通过上述的方法，可以较好地解决Vue打包静态资源后页面显示空白和static文件路径报错的问题，提高项目的稳定性和用户体验。
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
问题 吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 dist:. │ index.html │ └─static ├─css │ app.b7bce283257fbd427fb1dc3fea80cee1.css │ app.b7bce283257fbd427fb1dc3fea
vue-cli3项目打包后自动化部署到服务器的方法
10-14
Vue CLI 3 的打包命令通常是 `npm run build`，它会生成一个 `dist` 目录，包含优化过的静态资源，适合生产环境。 接下来，为了实现自动化部署，我们需要借助一个名为 `scp2` 的模块，它允许我们通过 SSH 协议安全...
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
关于vue-cli3 脚手架打包配置路径配置详解 打包后404问题解决
Taurus_666
09-17 1700
配置在域名主目录下 注意： baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath。 publicPath的官方定义为： 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 第一步： vue.config.js中配置 module.exports = { pub
vue cli 3 打包静态资源路径配置，否则会出现404噢
热门推荐
初心 - 杨瑞超个人博客
03-19 1万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 根目录新建 vue.config,js module.exports = { publicPath: "./" } 这样就可以解决啦 ~ ~ ~ ...
vue-cli3打包上线后后台接口404错误（vue-cli3.11版本）
qq_37021104的博客
12-21 4102
vue项目在开发模式时，使用的axios调用的后台接口，而使用axios调用后台接口，需要在vue.config.js中配置proxy代理，否则会出现请求头错误，而设置了proxy代理后，vue项目打包proxy代理就会失效，因为proxy代理并不会一起打包到dist文件夹下，网上的说法都是配置不同环境新建env文件及更换baseurl等，但是我发现这种做法在vue3.11版本中并不适用，直接根据...
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 1334
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
vuecli3 public 静态文件404
05-10
在使用Vue CLI3创建项目时，通常会在根目录下建立一个public文件夹，该文件夹下存放静态资源文件，如图片、字体、favicon等等。但是在实际使用过程中，会发现用浏览器打开web页面时会报出404错误，提示找不到静态资源文件。 这种现象的出现是因为Vue CLI3默认使用了webpack进行打包构建，webpack对于public文件夹中的静态资源文件会将其编译到dist文件夹中。而在开发过程中，需要访问public文件夹下的静态资源文件，而不是dist文件夹中的。 为了访问public文件夹下的静态文件，要想办法将public文件夹下的内容复制到dist文件夹中，并保持目录结构一致。 最简单的解决方法是在项目根目录下创建一个vue.config.js文件，设置publicPath属性为'./'，并添加copy-webpack-plugin插件来复制public中的文件到dist目录。代码如下： ``` const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = { publicPath: './', configureWebpack: { plugins: [ new CopyWebpackPlugin([{ from: 'public', to: '' }]) ] } } ``` 这样就可以在浏览器中访问public文件夹下的静态资源文件了。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值