解决vue打包部署nginx非html根目录时，无法访问页面，无法加载静态资源，显示空白页 |
您所在的位置：网站首页 › 浏览器加载静态文件失败 › 解决vue打包部署nginx非html根目录时，无法访问页面，无法加载静态资源，显示空白页 |
解决vue打包部署nginx非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的配置加载到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; } 验证是否成功在vue项目中页面写几个标识符号，然后登录页面进入对应页面是否存在标识符号，如果存在说明是成功。。。。 |
别急！！！！再看看 打开vue的vue.config.js文件，发现打开时，有个加载静态资源路径是：【本文地址】