医疗网站建设及优化方案,服装企业网站建设可行性分析,ppt设计倒计时,WordPress点击文章显示404Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题#xff08;完整步骤#xff09;#xff08;亲测有效#xff09;
1.流程步骤#xff08;本教程下载的是1.20.2版本#xff0c;放在D盘#xff09;
1-1. 首先去官方下载 nginx #xff0c;然后在当前目录下创建ht…Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题完整步骤亲测有效
1.流程步骤本教程下载的是1.20.2版本放在D盘
1-1. 首先去官方下载 nginx 然后在当前目录下创建html文件夹html下再创建h5和web文件夹分别代表H5项目和管理后台项目
1-2. 分别将不同的项目代码放到不同的项目里面注意: vue-cli 项目需将打包后的文件放到对应的文件夹
2.nginx.conf 配置 server {listen 80; //默认location / {root D:/nginx-1.20.2/html/website;index index.html; try_files $uri $uri/ /website/index.html last;error_page 404 /website/index.html;}
}server {listen 1080; //自定义server_name 192.168.88.68; #charset koi8-r;#access_log logs/host.access.log main;# 允许跨域GET,POST,DELETE HTTP方法发起跨域请求#add_header Access-Control-Allow-Origin *;#add_header Access-Control-Allow-Credentials true;#add_header Access-Control-Allow-Headers Authorization,Content-Type,Accep,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With;#add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;#if ($request_method OPTIONS) {#return 200;#}# 官网 nginx 部署location ^~/website{index index.html; try_files $uri $uri/ /website/index.html last;error_page 404 /website/index.html;}#帮助信息图片文件资源后台apilocation ~ /(helpInfo|image)/ {proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-real-ip $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8009;}# vue-web管理后台测试环境location ^~/vue-web-test {index index.html; try_files $uri $uri/ /vue-web-test/index.html last;error_page 404 /vue-web-test/index.html;}# vue-web管理后台生产环境location ^~/vue-web-prod {index index.html; try_files $uri $uri/ /vue-web-prod/index.html last;error_page 404 /vue-web-prod/index.html;}
}vue 项目访问链接http://192.168.88.68:1080/vue-web-test/index
3.遇到的问题
vue-web部署上去后首次访问正常但刷新后却出现404
问题解决检查配置是否正确包括字母是否错误如下举例所示
# vue-web管理后台测试环境
location ^~/vue-web-test {index index.html; try_files $uri $uri/ /vue-Web-test/index.html last;error_page 404 /vue-web-test/index.html;
}首次进入界面可以正常但一刷新界面就404 问题所在try_files $uri $uri/ /vue-Web-test/index.html last;中的Web写成了大写三个地方的vue-web-test都得一致否则就会出现404情况。
注意需检查三个地方的命名是否一致是否严格按照驼峰命名
