vue项目通过nginx部署后访问js,css等静态资源404

最新推荐文章于 2023-08-22 17:09:48 发布
最新推荐文章于 2023-08-22 17:09:48 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 开发 笔记 文章标签： vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37128767/article/details/116930463
版权

vue项目通过nginx部署后访问js,css等静态资源404，可尝试更改vue.config.js中publicpath:"./" 默认为’/’
再次运行npm run build
我这边这样解决了

具体技术文章见"vue-cli"官网
vue-cli配置参考
在这里插入图片描述

向前跑丶加油
关注
专栏目录
nginx不转发static下文件_Nginx与Vue
weixin_39583623的博客
11-20 1218
这篇文章主要是在说两个内容： 1. 如果编译后的vue不能通过 location / 来访问，必须通过 location /xxx 或者 location /xxx/xxx 这种方式访问，该如何配置vue和nginx。 2. 如何解决nginx配置完vue后，除了首页内容，其他页面点击浏览器刷新操作会出现空白页面。对于如何使用nginx作为服务器访问编译好的vue.js网上应...
Vue项目部署Nginx配置文件 SSL
08-11
当你的 Vue 项目完成开发并经过 `npm run build` 编译后，生成的静态资源需要部署到服务器上供用户访问。Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets ...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
nginx反向代理二级目录 导致vue项目静态文件css js访问不到
Z.X的博客
06-01 4918
2022年5月30日19:06:00 nginx vue项目配置 server { listen 9888; server_name 127.0.0.1; error_log /data/log/nginx/houtai-error.log; access_log /data/log/nginx/houtai-ac...
nginx alias php 404,Nginx设置alias的二级目录之后，首页访问正常，但是js、css、图片等静态文件出现404...
weixin_39848007的博客
03-29 1625
Nginx设置alias的二级目录之后，首页访问正常，但是js、css、图片等静态文件出现404，之前配置了一个域名为pc访问域名，域名加个目录是访问后台，类似：a.com 是首页，a.com/admin 是后台，而且两个目录在同一个层级，但是alias配置之后一直找不到静态文件。初始方案：域名：a.com前端：a.com 指向/manyidea/www/svnweb/hdd/dist;后台：a...
nginx部署二级目录无法加载css和js问题解决方案
guiripei的专栏
07-06 1万+
nginx部署二级目录无法加载css和js问题解决方案
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
nginx部署vue项目
01-20
在部署过程中，务必确保Nginx的配置没有语法错误，并且服务器有权限访问Vue项目的静态资源目录。同时，为了保证最佳性能和安全性，可以考虑启用GZIP压缩、HTTP2支持以及SSL证书，这些都可以通过修改Nginx配置实现。
nginx部署访问vue-cli搭建的项目的方法
08-28
使用 Nginx 部署访问 Vue-cli 搭建的项目需要配置 Nginx 服务器，包括创建后台服务器对象、创建访问端口和反向代理规则、配置反向代理规则和配置跨域问题等步骤。通过这些步骤，我们可以成功地部署和访问 Vue-cli ...
nginx部署vue项目出现404查找不到js，css文件解决方法
yb305
12-19 5928
nginx部署vue项目出现查找不到js，css文件,查看请求发现是路径问题； 直接修改vue项目中的vue.config.js文件，将基本路径设置为相对路径 module.exports = { // 基本路径 publicPath:"./", // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径 outputDir:“dist”, //打包时生成的生产环境构建文件的目录 assetsDir: ‘static’, // 放置生成的静态资源 (js、css、im
Nginx 解决做反向代理时 静态资源 js css 访问不到
言小溪 的博客
11-09 2927
在反向代理时添加另一个规则 #反向代理 location / { proxy_pass http://localhost:9001; } #解决js css 访问不到的问题 location ~ .* { proxy_pass http://localhost:9001; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_ad
阿里云——Vue项目发布后，nginx配置反向代理
奔跑的狮子
11-29 1294
添加站点 这个就是把vue项目添加到Nginx里面，能够通过ip/域名直接访问 （添加过程…就不说了，前面有个文章有，叫《部署Vue项目到阿里云服务器》） 设置代理 为什么要设置代理呢，因为我们既然是vue的项目，那基本就是前后端分离的（没分离不用看这个），分离的话，端口就会不一样，就会造成跨域，那么我9094端口的vue项目，访问9095端口的后端，就会访问不到了呀，所以要设置Nginx的代理。 说这么多也没用，各位自己遇到麻烦的时候就知道什么意思了。 所以，如何配置代理？ 点击站点后，点击反向代理
vue项目部署到nginx服务器，静态资源不能加载问题的处理
qq_27474555的博客
11-06 6843
1、现象 部署到服务器，提示以下错误： GET http:/static/css/static/fonts/element-icons.535877f.woff net::ERR_ABORTED 404 (Not Found)2、原因 路径问题，开发环境系统会自动配置，而部署环境可能需要用户干预；3、解决办法 build/utils.js文件中添加publicPath路径，修改前： if (opt...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
Nginx部署vue项目过程，以及遇到的坑
amamiyayouko的博客
06-07 1590
Nginx部署vue项目过程，以及遇到的坑
nginx部署vue项目，路由配置，后端访问接口配置
最新发布
weixin_45393413的博客
08-22 8643
nginx部署vue项目，配置前端项目访问子路径，后端访问接口路径配置
【踩坑】：vue项目打包，用nginx部署了，但是访问不到页面
TanMengyi的博客
06-15 1万+
最近做的一个vue项目，npm run build打包后，用nginx部署， 打开默认地址： 域名/gcmanager/，跳到了我配置的404页面，如下图： 于是我手动输入页面的路由地址，我本地这个路径都能访问到页面，为部署后却找不到页面了， 这是我路由的index.js文件 分析问题： nignx，需要配置history模式，解决办法有两种： a. 取消路由的 history 模式，把mode:"history"去掉 b.nginx配置location / { try_files $uri $
Vue打包+nginx部署躺坑记
木子的博客
12-20 1261
vue打包生成，dist文件夹，里面有index.html文件和static文件夹，通过nginx进行部署
新版nginx-1.22.0实现vue前端高效静态部署
在前端开发领域，Nginx常被用作静态资源服务器，用于部署Vue.js等前端框架构建的单页应用（SPA）。SPA的特点是利用HTML5 History API来实现无刷新的页面跳转，从而提升用户体验。由于SPA只在客户端进行路由处理，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值