解决vue项目nginx部署到非根目录下刷新空白的问题
时间: 2023-05-08 19:01:28 浏览: 114
当将vue项目部署到非根目录下时,刷新页面会出现空白的问题,这是因为vue-router默认使用HTML5 history模式,而浏览器刷新时会向后端发送请求,但后端没有对应的路由,导致页面显示空白。
解决方法如下:
1. 在nginx配置文件中添加以下配置,将所有非文件请求都转发到index.html:
```
location /subdirectory/ {
try_files $uri $uri/ /subdirectory/index.html;
}
```
2. 在vue-router中设置base路径为部署路径,例如:
```
const router = new VueRouter({
mode: 'history',
base: '/subdirectory/',
routes: [...]
})
```
这样就解决了部署到非根目录下刷新空白的问题。需要注意的是,如果在vue项目中使用了绝对路径,也需要更新为相对路径,否则会导致资源加载失败。
相关问题
nginx部署vue项目刷新404
当使用nginx部署vue项目时,刷新页面或访问路由配置页面时可能会出现404错误。这是因为vue项目属于单页面开发,只有一个index.html文件。解决这个问题很简单,只需要将访问重定向到index.html页面,然后由index.html处理对应的路由跳转。可以通过修改nginx的配置文件来实现。首先,在nginx的配置文件中添加以下代码:
```
location / {
try_files $uri $uri/ /index.html;
}
```
这样就可以解决刷新页面时出现404错误的问题。然后,重启nginx服务器使配置生效。这样就完成了nginx部署vue项目并解决刷新404的问题。\[1\]\[3\]
#### 引用[.reference_title]
- *1* [nginx部署vue项目,刷新页面404](https://blog.csdn.net/qq_45029459/article/details/129014641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Nginx部署Vue项目以及解决刷新页面404问题](https://blog.csdn.net/qq_27985607/article/details/86608392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [五步用Nginx部署Vue项目及动态路由刷新404问题解决](https://blog.csdn.net/weixin_54218079/article/details/125755795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue项目必须部署到nginx
是的,Vue项目通常需要部署到Nginx上。为了部署Vue项目,你需要执行以下步骤:
1. 停止Nginx服务:使用命令`/usr/local/nginx/sbin/nginx -s stop`来停止Nginx服务。
2. 创建网站根目录并将Vue项目放入其中。
3. 配置Nginx服务:Nginx的配置文件通常位于`/usr/local/nginx/conf/nginx.conf`。你可以使用编辑器打开该文件,并根据需要进行相应的配置。
4. 指定配置文件启动:使用命令`/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf`来指定配置文件启动Nginx。
这样,你的Vue项目就会成功部署到Nginx上了。请确保按照上述步骤进行操作,并根据你的具体需求进行相应的配置。