nginx打包Vue项目时，css,js等静态文件路径错误解决方案

最新推荐文章于 2024-04-27 14:56:45 发布
最新推荐文章于 2024-04-27 14:56:45 发布
阅读量2.1k 收藏
点赞数
分类专栏： Web前端开发 Vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40355352/article/details/109058523
版权

第一、更改配置文件。打开项目文件下config文件夹下的index.js文件，将其中的build下的assetsPublicPath: ‘/’,修改为assetsPublicPath: ‘./’,。
第二，再次执行npm run build打包项目，替换之前的dist文件。

qq_40355352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Nginx 部署 静态资源路径问题
Jikycc的专栏
06-26 2906
本项目采用Nginx同端口不同目录方式部署，共用SSL证书，在部署过程中，由于加了不同的目录，导致静态资源路径不对。有两种情况：1.在反向代理时，proxy_pass地址带"/"和不带“/”区别： 如上图，若不带“/”，则直接将域名换成代理地址，转发到接口服务器，比如浏览器访问：http://mysite.com/app/api，实际是访问 http://localhost:3001/app/api若带“/”，nginx则去掉 /app，拼接后转发给接口服务器。比如浏览器访问：http://mysite
解决vue打包后静态资源路径错误的问题
最新发布
2401_84435555的博客
04-27 1120
页面中引入资源的方式往往有如下几种* HTML标签中直接引入图片， 如* JS代码中定义资源路径属性，如* CSS代码中定义资源为背景图片，如上述三种资源加载方式还是有所区别的。前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图片加载失败，同时报出如下错误。
nginx部署二级目录无法加载css和js问题解决方案
guiripei的专栏
07-06 1万+
nginx部署二级目录无法加载css和js问题解决方案
nginx部署vue项目出现404查找不到js，css文件解决方法
asd52656的博客
05-29 1万+
nginx部署vue项目出现查找不到js，css文件解决方法 1.先测试你的vue文件本地是否正常显示打开，正常再进行第二步，否则是你vue打包后的文件出现错误了 2.测试nginx是否正常，可以在ftp中查找你vue项目中的文件，浏览器打开nginx打开那个文件，能正常打开则进入第三部，否则就是你nginx配置问题，nginx无法映射此vue文件夹 3.重新配置一个新的nginx的conf文件， # 前端vue转发 location / { root /data/frontend/di
关于nginx部署vue项目，浏览器找不到css资源文件，或者浏览器加载css文件失败问题
qq_45015949的博客
01-17 4521
这里写自定义目录标题在nginx部署vue项目时，谷歌浏览器能正常加载，火狐报css加载失败 在nginx部署vue项目时，谷歌浏览器能正常加载，火狐报css加载失败 在看publicPath配置时，publicPath: process.env.NODE_ENV === “production” ? “./” : “/”, 把’./'改成了绝对路径，然后重新打包发现问题解决了。但是不知道为什么解决了，于是又去查了一些资料。 一、含义 ‘./’表示相对路径，表示当前目录下的 ‘/’表示绝对路径，表示根目录下
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
当运行`npm run build`时，Vue CLI会将项目打包成静态资源，包括HTML、CSS、JavaScript等。默认情况下，CSS会被内联到HTML文件中或打包成单独的CSS文件。这些文件会被放置在`dist`目录下，其中静态资源的路径可能受...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
Vue项目部署Nginx配置文件 SSL
08-11
- 通过 `location` 块配置，Nginx 可以高效地处理各种静态文件请求，如 CSS、JS、图片等。 ```nginx location / { try_files $uri $uri/ /index.html; # 处理 Vue 路由的history模式 } ``` 7. **错误页面处理...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的...
vue 打包部署后打开网页空白，找不到css、js等资源
Zmikoo学习之路
03-11 1872
修改config文件夹下的index.js文件build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',//前面加上. productionSourceMap: true, ``` 修改build.
Nginx 安装及配置、负载均衡https网站及转发后页面js、css等路径找不到问题、更换证书导致问题解决...
weixin_30886233的博客
05-12 762
官网下载nginx：http://nginx.org/en/download.html 安装nginx编译环境：yum install-ygcc-c++ 安装pcre库解析正则：yum install -y pcre pcre-devel 安装zlib库用于压缩解压缩：yum install -y zlib zlib-devel 安装openssl库：yum install -y o...
Nginx反向代理内网web系统找不到CSS，JS及图片问题解决方案
热门推荐
飞龙在天
04-04 1万+
一、背景介绍： 有个部署在内网的web单体应用，需要通过部署在DMZ区的Nginx访问到，由于需要复用现有的域名，所以只能是通过在Nginx上增加location的方式访问。 二、问题描述： 但是在访问的时候，发现通过location能够跳转到内网的web应用，但是显示的是空白页面，通过在浏览器上F12，发现是访问不到web应用的css，js和图片。 三、解决方案： 3.1解决方案一：在Nginx的location中增加请求头 在nginx的nginx.conf配置文件中添加如下配置 lo
Nginx发布Vuejs项目
liu22985342的专栏
08-11 1354
1、问题描述 给前端同事部署了web项目之后，访问发现除了index.html可以访问，其他的路径使用了“伪静态”。比如访问：http://localhost:8081/user/login，访问即报404错误，这个实际上是请求HTML相关资源而非后台接口，后面网上查了相关资料找到了解决办法。 2、配置文件 1 upstream portalServer { 2 ...
Nginx 无法正确加载静态文件，静态文件加载404或者为html；Nginx 配置访问指定url路径项目部署；
JCM_ZZ的博客
08-07 7431
1.在nginx location 定义指定url段时，加载不到页面，例如：访问一级目录为 /mypage 并且 二级目录可以是任意非空值时/mypage/xxxxx，由于部署目录实际不存在 /mypage/xxxx，因此访问返回 404问题； 2.页面中使用相对路径引用静态文件时，使用指定url段访问页面，不能正确加载到静态文件，例如：访问一二级目录构成的url/mypage/special时，假如html中有一个静态文件引入路径为./style.css，那么在实际访问页面时加载的静态路径为http://
nginx部署vue 找不到js,css
09-07
在部署Vue.js项目时，如果Nginx无法找到JS和CSS文件，可能是由于以下几个原因导致的： 1. Nginx配置文件错误：首先，确保Nginx配置文件中正确设置了项目的静态资源路径。你可以通过打开Nginx配置文件（一般位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default）来确认。确保在配置文件中添加了类似以下的配置： ``` location / { root /path/to/your/vue/project; try_files $uri $uri/ /index.html; } ``` 这个配置指定了项目的根目录以及在找不到文件时返回index.html文件。 2. 项目构建问题：如果你使用了Vue CLI进行项目构建，并生成了静态文件，确保构建成功并且生成了正确的JS和CSS文件。你可以通过在终端中运行`npm run build`命令来进行项目构建。 3. 静态资源路径错误：在Vue项目中，确保所有的JS和CSS文件的路径是正确的。使用Vue CLI构建后生成的index.html文件会自动引入正确的文件。确保引入的文件路径是相对于根目录的，可以通过在index.html中查看链接路径来确认。 4. 服务器缓存：如果之前已经访问过该项目，可能因为浏览器缓存问题导致无法加载最新的JS和CSS文件。你可以尝试在浏览器中按下Ctrl+F5强制刷新页面，或者清除浏览器缓存重新访问页面。 综上所述，检查Nginx配置文件、项目构建、静态资源路径和浏览器缓存等因素，可以解决部署Vue项目找不到JS和CSS文件的问题。希望以上回答对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值