到此vue项目就全部部署到nginx服务器中啦! 五、解决项目部署到nginx服务器中刷新页面404的问题 1. 进入nginx配置文件目录 代码语言:javascript 复制 cd nginx/conf/ 2.编辑配置文件nginx.conf 代码语言:javascript 复制 vi nginx.conf 输入命令 i 进入编辑模式,在指定位置添加代码 location/{root...index...try_f...
如果你正在使用Vue CLI 3或更高版本,并且使用vue-cli-service build来构建你的项目,它默认会生成一个dist/目录,你需要确保Nginx的root指令指向这个目录(或者将其内容复制到Nginx的默认目录)。 最后,不要忘记重启Nginx服务以使配置生效。你可以使用sudo systemctl restart nginx(对于使用systemd的系统)或其他相应的命令...
这是因为我的vue项目是采用了history路由模式,又因为vue是单页面应用,一旦切换路由之后,之前的页面就会不存在,然后你再刷新回到之前的页面就会出现404了。(个人理解) 解决的方法: 将路由模式修改为hash模式(不建议,hash模式#太丑) 修改nginx配置 location / { try_files$uri$uri/ /index.html; //解决页面刷新404...
在vue.config.js中配置devserver的proxy进行代理请求配置,然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候,需要再重新配置请求代理。 vue.config.js中代码配置如下: // 相当于webpack-dev-server,对本地服务器进行配置 devServer: { port:8089, // 启动端口 open:tr...
1、vi /usr/local/nginx/conf/nginx.conf 编辑Nginx配置文件,在http 区段添加下面代码:fastcgi_intercept_errors on; 2、编辑网站配置文件,比如本站:vi /usr/local/nginx/conf/vhost/onelone.com.conf ,在server 区段添加下面代码error_page 404 = /404.html; ...
2.2 vue-router跳转index页面避免出现404等界面 2.3 添加头部信息 2.4 还有人说是前端打包时baseURL的问题 3.我的解决方案: 3.1在前端config.js将这个localhost改为自己服务器端的地址,端口则是自己后端的端口 3.2 在Nginx.conf添加拦截路径和代理地址,ip和端口和上一步一致 *注意: 1.先看问题情况 2.我的解决方...
以往部署vuejs应用都是直接在nginx的location为/下直接部署,这次遇到要将vue应用部署在/vuejs-admin的非根下,使用以往部署方案直接访问就会404,这时修改步骤如下: 1、修改项目router配置,如下: 这里一是要修改router模式为history,另一个就是修改base地址为要访问的/vuejs-admin的地址,注意前后都有斜线 ...
vue项目(网站项目和网站的后台管理项目),同时部署在nginx的html文件下,后台管理项目模块要实现预览功能,在本次开发完没有问题,部署在linu服务器上后,预览页面显示404 文件位置 image.png 解决办法 1.首先配置nginx的default.conf文件中添加后台的location
最近在使用Nginx配置,反向代理vue的项目,发现点击都是正常的,只是刷新页面就会出现404,经过咨询运维大神和查资料,终于找到解决办法了。主要是在Nginx的配置文件加上这句: try_files $uri $uri/ /index.html; server { listen 80; server_name www.xxxx.cn; #charset koi8-r; in...
生成dist文件夹,把该文件夹下的文件直接复制到nginx服务器目录下,就可打开项目,但是只有首页是可以看到的,再刷新一下就404了,原因是vue的项目为单页应用,路由找不到所致。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下,这样就都能找到路由了。location/{try_files$uri$uri/@router;...