vue项目打包,解决静态资源无法加载和路由加载无效(404)问题

这篇具有很好参考价值的文章主要介绍了vue项目打包,解决静态资源无法加载和路由加载无效(404)问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

打包后的项目静态资源无法使用,导致页面空白

静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,此时找到config里面的index.js,在build模块下加入assetsPublicPath: './', 如下图所示,或者是在打包完的dist文件夹中找里面的.js文件,将其中的'/'替换为'./'(自行寻找)

       vue项目打包,解决静态资源无法加载和路由加载无效(404)问题

在History模式下配合使用nginx运行打包后的项目

当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在Vue开发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。

这是由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id(假设此url在开发中是可以访问的),也会得到一个 404 错误。

解决方法:在部署项目的服务器上找到nginx的配置文件nginx.conf添加以下内容

server {
        listen       80; #监听80端口
        server_name  audio;  #设置server_name名为audio,切记不能与配置文件中的其他server_name重名

        location / {
	   try_files $uri $uri/ /index.html; #使用history模式进行路由

            root 	C:\phpstudy_pro\WWW; #将打包好的dist文件夹中的内容放进WWW文件夹中
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
			add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

注意:配置完nginx后使用命令进行重载

nginx -s reload

或手动重启nginx服务文章来源地址https://www.toymoban.com/news/detail-710611.html

到了这里,关于vue项目打包,解决静态资源无法加载和路由加载无效(404)问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue打包之后的项目在nginx的部署404,以及无法跳转路由问题

    路径都对,项目路由本地也能正常访问,但是部署后加路由地址404。其实就是nginx配置的问题。知乎上一位大哥的解决办法:vue-cli打包之后的项目在nginx的部署404,以及无法跳转路由问题 - 知乎 问题其实就是路由没有重定向。更简单的配置方式就是try_files $uri $uri/ /index.html;  

    2024年02月14日
    浏览(40)
  • Flask项目打包为exe(附带项目资源,静态文件)

    运行以下命令来使用 PyInstaller 根据 my_app.spec 文件打包flask应用程序:

    2024年02月14日
    浏览(33)
  • vue3:加载本地图片等静态资源

    在我们用 vue2 + webpack 的时候,加载图片资源是这样用的: 这样打包后就会触发 file-loader 打包图片资源,在 dist 文件夹中就可以看到这个图片(如果图片较小会打包进代码中变为 base64 引入)。 但是在 vue3 + vite 中,使用这种方式是不行的,vite 中没有 require 会报错。 解决方案

    2024年01月18日
    浏览(45)
  • vue中图片不显示问题 - vue中静态资源加载

    在 JavaScript 被导入或在 template/CSS 中通过 相对路径 被引用。这类引用会被 webpack 处理后再输出到打包后的文件。 放置在 public(static)目录下或通过绝对路径被引用。这类资源将会直接被拷贝到打包后的文件 ,而不会经过 webpack 的处理。 在 config.js 的 build.assetsPublicPath 和 build

    2024年01月25日
    浏览(45)
  • Springboot 使用thymeleaf 服务器无法加载resources中的静态资源异常处理

    Springboot使用thymeleaf,并 连接远程数据库 启动时,无法加载resources中的静态资源 浏览器报错 后端启动时报错 前端打开页面时后端报错 打包编译项目,显示找不到js、css、html等静态资源,但本地路径并没有写错,于是我去找编译文件,查看是不是静态资源没有编译到,打开项

    2024年02月04日
    浏览(47)
  • SpringBoot项目修改中静态资源,只需刷新页面无需重启项目(附赠—热加载)

    💢初衷💢       因为一遍遍修改并重启项目觉得很麻烦,所以刚开始就自己给项目配置了热加载,但奈何代码更新还是慢,还不如我重启一遍项目的速度,所以放弃了自己上网找到的热加载配置。直到我debugger前端代码时,问题出现了,因为我项目的前后端没有分离,所以

    2024年02月14日
    浏览(50)
  • [绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到

    缺点:需要和部署的路径保持一致,不是很灵活 1、在环境变量.env中定义url前缀 2、定义vue路由前缀路径router/index.js 3、vue配置公共路径前缀vue.config.js 4、打包部署到nginx或其他中间件,此时要保证前缀和部署的前缀保持一致 nginx 1、使用history模式 2、定义vue路由前缀路径rout

    2024年02月11日
    浏览(50)
  • Django 加载静态资源及<!DOCTYPE html>标红解决办法

    1.文件夹位置: 用于开发者存放HTML页面。 本文件夹位置建立在app01文件夹目录下 -- 新建templates文件夹 -- 并在文件夹下创建html文件。 该文件的文件名与上述链接指向的html文件名称相同。 2.要点: 优先去项目的根目录的templates中寻找(这个需要提前配置),不配置则无效。

    2023年04月08日
    浏览(57)
  • vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)

    https://www.dcloud.io/hbuilderx.html 打开 HBuilder X,新建项目 此处项目名以 ‘test’ 为例 若 vue 项目中含跨域代理,如 vue.config.js 则在打包成 apk 后会无法访问接口,因为app无跨域限制,不能使用跨域代理,需使用访问接口的绝对路径,如:原接口 “/myAPI/dmis/login” 需改为 “http://

    2024年02月03日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包