vue build后。静态资源的404问题探究，解决

最新推荐文章于 2023-10-08 11:37:15 发布

weixin_34072637

最新推荐文章于 2023-10-08 11:37:15 发布

阅读量2.8k

点赞数 1

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/u/222749/blog/2252471

版权

2019独角兽企业重金招聘Python工程师标准>>>

vue-cli升级到3.0，build项目后，传到服务器，页面显示空白

具体原因是静态资源的路径跟服务器的不匹配

修改方法，打开文件：vue.config.js，加入下面内容

baseUrl: '/pet-mgr/' ,

将dist文件夹上传到服务器的根目录后，将dist文件夹重命名为pet-mgr就可以了

转载于:https://my.oschina.net/u/222749/blog/2252471

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34072637

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue路由history模式刷新页面出现404问题

ctf_0226的博客

12-03

322

vue hash模式下，URL中存在'#'，用'history'模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html; index index.html index.htm; if (!-e $r...

解决webpack vue 项目打包生成的文件，资源文件均404问题

aiyaya2016的博客

01-08

432

　　最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下一、首先修改config目录下的index.js文件将其中build的配置项assetsPublicPath进行修改，改为目的是将资源文件的引入路径，改为相对地址（相对inde...

参与评论您还未登录，请先登录后发表或查看评论

vue项目通过nginx部署，刷新产生404问题的解决

最新发布

m0_37630138的博客

10-08

4714

vue项目通过nginx部署，刷新产生404问题的解决

前端加载404(Not Found)问题常用的解决方法

你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。

04-19

1万+

前端404问题是指在页面中访问不存在的资源时出现的页面404错误

vue - 源码探究 vue-cli 2 中 '/static'目录和 '/src/assert'目录区别

LawssssCat的博客

03-06

1422

vue-cli 官方对 - 静态资源的介绍这里 vue cli 3 里面也大同小异，3 只是把 static 改成了 public 文章目录# 指定 - 输出目录： /dist# 指定 - 静态资源文件名：static# 拷贝 - /static目录到 /dist/static目录结论：关于 /static 目录# 指定：编译后的名字（或者目录）# url-loadder 的 ...

探究SEO与VUE首屏渲染及其解决方案

weixin_56659504的博客

04-09

403

五个方面 1.SPA单页面应用首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。不利于SEO 根据这几个缺点，我们便又引出了接下来讨论的两个主题，SEO和SSR，先谈谈SEO。 2. SEO搜索引擎搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。 Vue SSR说：如果你的应用程序初始展示 loading 菊

Vue DOM挂载

小王的技术库

06-17

1554

接下来我们就来探究是如何将该页面进行渲染的。在研究之前，我们必须了解构造函数。但是在执行函数前，当我们的时候，该框架做了这样的几个初始化：其实上面的函数是在我们导入时，该框架本身做的一些初始化，这和我们执行构造函数时内部的初始化不一样。这些函数主要是在我们使用前，向构造函数的原型上添加一些函数。而当我们执行构造函数时，也会在内部进行一些初始化，例如响应式的完成和数据代理。所以我们需要区分这两种初始化。然后我们就可以执行构造函数了。当我们执行构造函数的时候，本质上其实就是执行方法。这个是在函数中声明的。函

三大主流框架React、Angular、Vue

lin123_00的博客

06-27

4102

【引言】 web前端开发当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究。【React】 React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需

核心框架：SpringBoot/Vue.js

qq_17295025的博客

11-17

764

SpringBoot 微服务阶段 JavaSE：OOP Mysql：持久化 html+css+js+jquery+框架：视图，框架不熟练，css javaweb：独立开发MVC三层架构的网站：原始 ssm：框架：简化了我们的开发流程，配置也开始比较复杂 war：tomcat运行 Spring再简化：SpringBoot-jar：内嵌tomcat；微服务架构服务越来越多：SpringCloud管理 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FfzI5I76-1605599

部署到服务器上访问404的解决办法

qq_61781758的博客

05-12

1965

我本机ping虚拟机ping不通，我觉得应该是这个的原因，但是我自己的问题还是没解决，发出来给大家做个参考吧。publicPath: './', //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源。assetsDir: '', //静态资源目录（js, css, img）8.用本机ping虚拟机，或者用虚拟机ping本机看能不能ping通。outputDir: 'dist', //build输出目录。具体效果是在找不到页面的情况下，自动跳转到index.html。7.看防火墙关没关。

解决vue-cli构建的项目在build后，本地index打不开

weixin_43403746的博客

05-12

1487

时间有限，废话少说。不需要新建什么vue.config.js文件，也不需要改路由什么的，老版本可能需要，新版本根本没有vue.config.js文件，只有build和config目录，在这里做修改即可。 1.将config目录中的index.js文件中，build里面的assetsPublicPath改一下 assetsPublicPath: './', 改成前面多加一个点就可以的，记得是build对象里面。 2.在build的utils.js里面的if（options.extract）{}里加上下面这

Vue build打包后，刷新页面出现404的解决方案

陌小白的博客

06-08

2871

Vue build打包之后，刷新页面出现404，HTML5 History 模式原因分析： const router = new VueRouter({ mode: 'history', routes: [...] }) 后端配置例子 Apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f

vue项目部署服务器，static文件夹里文件路径不对报404

weixin_42981487的博客

10-12

5055

场景：vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，在nginx配置完成情况下，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。原因：路径不对，找不到对应的static文件夹方案：有两种修改方式，一种是修改为相对路径，一种是修改为绝对路径。以相对路径为例解决方案：将 ’ / ’ 改成 ’ ./ ’ 然后重新打包部署，访问就可以了。参考于：vue 项目放在服务器上 静态资源路径不对报404错误_yongy.

VueJs 打包之后遇到的坑

热门推荐

biaov

06-01

4万+

最近在用webpack+vue写项目，经过几天的熬夜加班改BUG，终于把基本的框架给写完了，后面只要加一些小功能就可以了，太好吧！先来npm run build 打包出来看看吧！打包中...，我们用本地服务器打开看一下。额，不看不知道，一看吓一跳，坑咋这么多呢！但是作为一名积极向上的IT从业者，填坑吧。1.打包之后没有被渲染出来。怎么回事，刚打开就告诉我啥也没有，这是要搞事情的前奏啊！，我们看一下...

vue项目静态资源404报错(vue3)

beiTiao_lys的博客

03-22

1773

vue中静态图片404

Vue之通过http服务打开build后的项目

HZKang的博客

10-26

2049

vue的打包命令是npm run build，打包完直接打开页面是不行的，只能看到加载的静态资源，需要启动一个HTTP服务，然后访问到打包后dist目录下的文件才能看到完整的项目，方法如下：第一，在根目录下config/index.js中增加端口portport: 9000,第二，根目录下建一个启动http服务的文件product.sever.jsvar express = require('e

vue build打包之后首页白屏的问题

Lee的博客

12-23

1万+

问题描述本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 1.解决方法在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子。 2.在build文件夹中打开webpack.prod.conf.js 找到output：增加...

解决Vue 没有static目录无法动态加载图片的404问题

finalheart的博客

05-10

1万+

最近在写毕设，接触到的Vue。发现vue -V 2.9.6 版本的项目目录下面没有所谓的build 目录也没有static目录。下面是我的项目目录结构。 1.首先说一下，我没有改配置。这个目录结构有main.js webpack.config.js这两个主要的配置文件。在解决这个问题时我没有做任何修改。 2.我想实现的是数据库里面存的图片路径，然后在img标签中src属性直接...