由于Vue应用是SPA,所有路由都应该在前端处理,因此返回index.html是合适的。 确保你的Vue应用已经通过npm run build(或类似的命令)构建完成,并且所有的构建文件(包括index.html)都已经被放置在Nginx的root指令指定的目录中。 如果你正在使用Vue CLI 3或更高版本,并且使用vue-cli-service build来构建你的项目,它默认...
三、解压此文件到nginx/html/目录下 四、复制dist目录到nginx的html目录中 到此vue项目就全部部署到nginx服务器中啦! 五、解决项目部署到nginx服务器中刷新页面404的问题 1. 进入nginx配置文件目录 代码语言:javascript 复制 cd nginx/conf/ 2.编辑配置文件nginx.conf 代码语言:javascript 复制 vi nginx.conf 输入...
假设你的vue项目是在/home/vagrant/my-project目录下,你使用的是nginx服务器。 示例1:在nginx.conf文件中添加配置 在服务器上运行如下命令打开nginx.conf文件: sudo nano /etc/nginx/nginx.conf 在http块中,加入如下配置: server { listen 80; server_name localhost; location / { root /home/vagrant/my-proj...
因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。 这样的nginx配置会出现该问题。 location / { alias /home/vue/dist/; index index.html; } 解决办法:需要配置nginx,如果找不到物理路径时,应该去哪里找。 于是将nginx配置...
Vue-使用Nginx时遇到刷新后404,在nginx配置中加入try_files$uri$uri//index.html;如下:location/{try_files$uri$uri//index.html;#解决页面刷新404}
3.2 在Nginx.conf添加拦截路径和代理地址,ip和端口和上一步一致 *注意: 1.先看问题情况 2.我的解决方案是部署在服务器,且是在以下的网上方法都不管用的情况下实现。比如: 2.1 重写api 2.2 vue-router跳转index页面避免出现404等界面 2.3 添加头部信息 2.4 还有人说是前端打包时baseURL的问题 3.我的解决方案:...
vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置: nginx配置内容: location / { try_files $uri $uri/ @router; index index.html; ...
假设我们有一个Vue项目,部署在Nginx服务器上,并且使用HTML5 History模式进行路由管理。 问题描述: 用户在访问http://yourdomain.com/some-route时,直接刷新页面会报404错误。 解决方案步骤: 配置Vue Router使用HTML5 History模式: const router = new VueRouter({ ...
随笔: • 系统客户端及管理后台共用同一个域名,通过nginx代理管理后台项目时刷新页面返回404(history 模式); • vue hash 模式下可以解决此问题,但是url 中存在"#"不太美观 修改nginx 配置 location /admin { alias /usr/share/nginx/html/; ...
【摘要】 通过Nginx,代理Vue项目,刷新页面返回404。为什么会出现404原因是因为web单页面开发模式,只有一个index.html入口,其他路径是前端路由去跳转的,nginx没有对应这个路径,当然就是404了。一般nginx监听配置如下 server { listen 8086; server_name localhost; lo... ...