nginx处理页面不展示真实url nginx找不到html页面

转载

mob64ca13f83523 2024-03-20 12:34:46

文章标签 nginx处理页面不展示真实url nginx vue.js node.js html 文章分类 运维

项目部署到nginx的html子目录下，无法加载静态资源，一直显示空白页面

vue项目部署到nginx的html目录下子路径，在nginx配置好子路径后，使用子路径一直无法放到到静态资源，本文中nginx的配置都是在监听80端口下

#nginx配置监听80端口的部分配置
server {
		listen      80;
		server_name localhost;
		#charset koi8-r;
		client_max_body_size     1024M;
		charset utf-8;
		#access_log  logs/host.access.log  main;
		location /gz/ {
		    root  html;
		    index index.html index.htm;
		}
		location /prod/ {
			proxy_set_header Host $host:$server_port;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://127.0.0.1:8080/;
		}
	}

使用ip地址加gz路径：http:127.0.0.1/gz,进入后一直打开的是空白页面，无法加载静态资源，打开F12发现无法访问是因为静态资源都在http://127.0.0.1/static下了，但是配置的项目路径是gz，导致很奇怪，无法自动加载在gz目录下。

nginx处理页面不展示真实url nginx找不到html页面_vue.js

别急！！！！再看看

打开vue的vue.config.js文件，发现打开时，有个加载静态资源路径是：

# 原先的版本
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
修改成：指定在加载静态资源的路径
publicPath: process.env.NODE_ENV === "production" ? "/gz/" : "/",

当然前端大佬可以配置成，自动根据nginx的配置加载到gz目录下，目前没研究出来，先写死吧
配置好，肯定得打包部署下测试环境，发现可以加载静态资源，但是由于未登录访问的路径，被重定向会到127.0.0.1/login页面了。因为之前在nginx的html目录下已经存放过项目，所以被自动重定向回到了html内的项目，这个项目不是部署到gz目录下，所以肯定还有那个地方需要修改。这里应该跟vue的路由有关。。对就是路由，需要vue访问的路径携带有#

vue项目访问携带有#

在路由router.js中将history给去掉，参考如下：其他项目可能有所不同

export default new Router({
  //mode: 'history', // 去掉url中的 #
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

再来试试。。。。。。。。。。。
部署到gz目录下，部署完成，开始访问，结果发现登录成功，静态资源正确加载

http://120.0.0.1/gz/#/login

之后项目的访问都是在http://120.0.0.1/gz/#下进行访问，到目前为止vue项目部署到nginx的html目录下子路径，在nginx配置好子路径后，使用子路径一直无法放到到静态资源的问题已经搞定。

nginx跨域配置

# 跨域配置放到上面的监听80的server{}中
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
			root html;
            expires      30d;
        }	
location ~ .*\.(js|css)?$ {
            root html;
            expires      12h;
      }