Nginx 部署 Vue 项目刷新页面出现404

问题

使用Vue.框架，利用vue-route编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。

原因

刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。这些访问资源都是在js里渲染。

解决方案

在nginx配置里添加vue-route的跳转设置

server {....location / {root        /home/tv;index       index.html;//加上此句try_files $uri  $uri/ /index.html;}}

Nginx 部署 Vue 项目刷新页面出现404相关推荐

Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
nginx部署vue项目路径添加前缀
背景:近日客户提出希望在部署后的路径上添加一个项目前缀dist,原来访问地址是http://192.168.11.186:8888,现希望改成http://192.168.11.186:8888/di ...
nginx部署vue项目，内外网映射后访问不到
问题:在内网服务器中用nginx部署了vue项目,再将外网域名与内网IP做了映射. 访问内网IP:PORT 成功进入访问域名:PORT 无法进入例:内网ng地址:123.12.1.2:9000 通 ...
使用Docker Nginx部署vue项目
Vue3 项目打包打包 Vue 项目在根目录使用以下命令: npm run build 执行以上命令,输出结果如下: 执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 in ...

Nginx 部署 Vue 项目刷新页面出现404

Nginx 部署 Vue 项目刷新页面出现404相关推荐

最新文章

热门文章