vue项目打包后，部署在服务器上出现404解决办法

最新推荐文章于 2023-12-11 17:18:37 发布
最新推荐文章于 2023-12-11 17:18:37 发布
阅读量7k 收藏 6
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mm_dxx/article/details/107118131
版权

今天把自己的vue-cli3项目打包后，在自己搭的阿里云服务器上测试时，出现页面空白，提示404，网上查了一下发现静态资源加载的问题，也就是路径出现问题。

我是把打包好的dist文件放在了nginx服务器的html文件夹下面，dist目录下有打包好的css、js、和img文件。

网上很多说是将vue.config.js里面的publicPath修改为“./”，但是我试了一下，还是不行，只显示了一个组件。然后我发现主页地址不对，按照我的配置，项目主页地址应该是http://服务器地址/dist/home，现在却是http://服务器地址/home

然后我将打包好的文件提取到html路径下，删掉dist文件夹，发现项目可以完成部署。但是我在同一级目录下放了好几个项目，所以我必须配置好文件夹，于是我在网上查到一个办法配置静态资源相对于服务器根目录的相对路径

publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/",

ok辣～

Mm_Dxx
关注
单页面模式路由刷新404问题
u013234218的博客
04-14 7560
自己开发中遇见单页面模式在路由上面刷新页面丢失找不到页面问题，在网上找了些资料然后在这里来总结一下。
vuecli3打包发布后无法访问静态资源（404）
Tino's Space
09-29 1万+
场景 vuecli3或者vuecli4项目，本地运行可以正常访问静态资源，打包发布到线上后，通过域名访问后无法访问到静态资源，也就是404 原因分析 1.配置的映射域名并不是在根域名下，而是在次一级的location下，而publicPath配置的确实绝对路径"/" 关于publicPath的配置，vuecli官方给了详细的解决办法，即是把vue.config.js中的publicPath改成相对路径，网上大部分人都是这么说的，然儿并不能彻底解决这个问题。 https://cli.vuejs.org/zh/
vue-cli3打包上线后后台接口404错误（vue-cli3.11版本）
qq_37021104的博客
12-21 4129
vue项目在开发模式时，使用的axios调用的后台接口，而使用axios调用后台接口，需要在vue.config.js中配置proxy代理，否则会出现请求头错误，而设置了proxy代理后，vue项目打包proxy代理就会失效，因为proxy代理并不会一起打包到dist文件夹下，网上的说法都是配置不同环境新建env文件及更换baseurl等，但是我发现这种做法在vue3.11版本中并不适用，直接根据...
解决 VueCLI3 项目打包上线刷新 404 的问题
hedeqiang
05-15 2663
最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。 但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。 最终经过一番搜索，解决方案如下： Nginx 例如使用 Nginx 部署，须做如下修改即可 location /{ error_page 404 /index.html; } 重启 Nginx 即可。 sudo service nginx restart Ap
vue3.0 打包项目到tomcat下，跳转页面出现404或控制台报uncaught syntaxerror
u014220146的博客
11-13 1120
vue3.0 打包项目到tomcat下，跳转页面出现404或控制台报uncaught syntaxerror 项目场景： 主要是想点击做一个跳转，在首页点击按钮然后打开一个新页面，不覆盖当前页面 问题描述： 打开一个新页面 window.open(this.$router.resolve({path: "/other"}).href, "_blank"); 在本地运行和打包到tomcat下运行时，可能会出现404页面，或者Uncaught SyntaxError: Unexpected token
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
解决vue项目打包上服务器显示404错误,本地没出错的问题
01-22
2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的utils.js文件，大约在51行添加 publicPath:../../ if (options.extract) { ...
Vue项目打包部署到iis服务器的配置方法
10-16
Vue项目开发完成后，需要通过打包工具如Webpack将其打包成静态资源，以便部署到服务器上。IIS (Internet Information Services) 是Windows系统上的一种Web服务器。在将Vue项目部署到IIS服务器上时，会遇到一些配置...
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...
weixin_39768917的博客
08-02 1431
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...
vue打包项目部署到服务器的非根目录后白屏或者404
Flyer_741的博客
05-27 732
把打包好的dist文件放到服务器的非根目录xwh文件夹里，就会出现404或者白屏，在之后会出现跳转都正常，但是刷新就变成404
vue-cli3打包上线页面空白接口404
陈福国的博客
02-12 995
解决这个问题，需要手动在根目录下配置vue.config.js。然后重新打包，重新把打包后的dist文件夹上传到服务器。
vue发布到服务器接口404_请教大佬关于 vue 部署后请求 404 的问题
weixin_39853843的博客
12-20 1310
vue 中使用的 api：localhost:8080/api/xxx后端的地址同上。vue 项目和后端部署在同一个服务器上，vue 使用 nginx 代理，后端独立部署。nginx 中的配置：server {listen 8081;server_name localhost;location / {root /home/ftp/verifydashboard/;index index.ht...
vue项目打包之后刷新页面空白解决办法
zuo_zuo_blog的博客
09-26 6056
项目遇到个情况，npm run build打包之后上传到服务器后，正常进入，但是刷新页面就是出现空白页，然后百度找了原因，是路由问题 1.路由模式将histroy改成hash模式，起初 mode:'history’ const router = new Router({ base: '/', mode: 'hash', routes: ROUTES }) 2.那么vue-router的hash...
Vue项目打包到服务器后请求接口报错404
热门推荐
speano的博客
05-22 1万+
解决Vue项目打包到服务器后请求接口报错404问题。
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
vue项目使用webpack打包后部署到服务中无法读取静态资源
最新发布
followly的博客
12-11 1902
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
vue项目静态资源404报错(vue3)
beiTiao_lys的博客
03-22 1822
vue中静态图片404
VUE项目打包后使用Tomcat部署 解决页面刷新后404问题
WindNolose的博客
05-17 7015
1.打包VUE项目 命令：npm run build npm run build 打包完成后，项目中会多出来一个dist文件夹，里面就是打包后的文件 2.部署Tomcat 此处采用docker compose的方式部署Tomcat 任意创建一个目录，在目录下编辑docker-compose.yml文件 挂载容器中的/usr/local/tomcat/webapps目录 version: "3" services: tomcat: image: tomcat:8.5 containe
vue3项目打包后部署到服务器 请求不到后台接口解决方法
05-01
当vue3项目打包后部署到服务器中无法正常请求到后台接口时，我们需要对此问题进行排查和解决。 首先，我们需要确认后台接口是否正确，可以通过访问接口测试地址或者发送请求测试工具进行测试。如果测试结果正确，则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值