在部署vue、react的前端项目时,经常会出现404的问题,一般是文件不是真正的存在,所以Nginx报404的错误 一、打包项目 1.在项目中的package.json上右键,点击Show npm Scripts 2.打包(或者直接在项目根目录运行 npm run build 命令) 3.成功后会在项目根目录生成dist文件夹 二、压缩并上传项目到服务器(我这
nginx部署vue编译项目刷新页面404 原因:nginx配置错误。 因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。 这样的nginx配置会出现该问题。 location / { alias /home/vue/dist/; index index.html; } 解决办法:需要配置nginx,...
确保你的Vue应用已经通过npm run build(或类似的命令)构建完成,并且所有的构建文件(包括index.html)都已经被放置在Nginx的root指令指定的目录中。 如果你正在使用Vue CLI 3或更高版本,并且使用vue-cli-service build来构建你的项目,它默认会生成一个dist/目录,你需要确保Nginx的root指令指向这个目录(或者将其内容复...
nginx 生成dist文件夹,把该文件夹下的文件直接复制到nginx服务器目录下, 就可打开项目,但是只有首页是可以看到的,再刷新一下就404了, 原因是vue的项目为单页应用,路由找不到所致。 所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下,这样就都能找到路由了。 location / { try_files $...
nginx部署vue前端,刷新出现404或者500错误的解决方案,如果一直报500检查:静态dist文件夹是否被nginx引用到,特别是docker部署进入容器看
Nginx部署Vue项目以及解决刷新页面404问题 一、打包项目 1.在项目中的package.json上右键,点击Show npm Scripts 2.打包(或者直接在项目根目录运行 npm run build 命令) 3.成功后会在项目根目录生成dist文件夹 二、压缩并上传项目到服务器(我这里是使用SecureCRT工具进行上传和部署项目的)...
可以看到nginx并不识别vue的其他页面,这跟conf文件的配置有关 代码语言:javascript 代码运行次数:0 运行 AI代码解释 location/{root/home/nx/dist;index index.html index.htm index.jsp;} 这是我们基础的配置,按照字义解读就是只访问了/dist文件下的 index.html、index.htm、index.jsp页面,而其他页面在访问的时...
最近在使用Nginx配置,反向代理vue的项目,发现点击都是正常的,只是刷新页面就会出现404,经过咨询运维大神和查资料,终于找到解决办法了。主要是在Nginx的配置文件加上这句: try_files $uri $uri/ /index.html; server { listen 80; server_name www.xxxx.cn; #charset koi8-r; in...
通过Nginx,代理Vue项目,刷新页面返回404。为什么会出现404原因是因为web单页面开发模式,只有一个index.html入口,其他路径是前端路由...
如果我们只想要部署一个vue项目,没有请求api的跨域问题,我们就没有必要用nginx,但是刷新404的问题依旧存在。 我们可以这样操作: 先下载一个web程序安装平台 下载地址 下载安装完成之后打开IIS可以看到我们安装的web程序安装平台 找到你配置的网站,双击打开web程序安装平台,并在它产品选项下的服务器中找到URL重写工具,进...