vue项目打包解决静态资源无法加载和路由加载无效(404)问题
更新时间：2023年10月12日 08:55:35 作者：NGIWS
这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧
打包后的项目静态资源无法使用，导致页面空白
静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对，此时找到config里面的index.js，在build模块下加入assetsPublicPath: './',如下图所示，
在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服务
到此这篇关于vue项目打包解决静态资源无法加载和路由加载无效(404)问题的文章就介绍到这了,更多相关vue静态资源无法加载和路由加载无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue2 Vue-cli中使用Typescript的配置详解
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。下面这篇文章主要给大家介绍了关于Vue2 Vue-cli中使用Typescript的配置的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要为大家详细介绍了vue实现登录时的图片验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue3中关于路由hash与History的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue - vue.config.js中devServer配置方式
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。下面通过本文给大家分享Vue 2.5的Diff算法，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了解决vue项目路径不正确,自动跳转404的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值2023-03-03
在Vue 3.5.0-beta.3版本中新增了一个base watch函数,这个函数用法和我们熟知的watch API一模一样,下面就跟随小编一起来了解一下它的具体使用吧2024-11-11
最新评论