nginx 部署 vue3 history路由404
时间: 2023-08-08 16:09:59 浏览: 69
如果使用 Vue3 的 history 模式进行路由,需要在 nginx 中进行配置,否则会出现 404 错误。
首先,需要在 nginx 的配置文件中添加以下代码:
```
location / {
try_files $uri $uri/ /index.html;
}
```
这段代码的作用是,当访问的地址不存在时,将请求重定向到 index.html 文件,然后由 Vue 路由来处理该请求。
另外,如果你的 Vue3 项目是在子目录下部署的,比如 `/myapp`,那么需要在配置文件中添加以下代码:
```
location /myapp/ {
try_files $uri $uri/ /myapp/index.html;
}
```
这样,就可以在 nginx 中正确部署 Vue3 的 history 路由了。
相关问题
vue部署 history 404
Vue部署history模式时出现404错误,可能有以下几个原因:
1. 服务器配置问题:在使用Vue的history模式时,当用户访问一个不存在的URL时,服务器会返回404错误。因此,我们需要在服务器上进行相关配置,使所有路由都指向我们打包后的index.html文件。在Nginx配置中,可以通过以下设置实现:
```
location / {
try_files $uri $uri/ /index.html;
}
```
这样,所有页面请求都会被重定向到index.html文件上,避免了404错误。
2. 资源路径问题:如果使用了相对路径引用资源,如图片、CSS或者JS文件,可能会导致404错误。在使用Vue的history模式时,资源路径应该以根路径开始,而不是相对路径。可以使用相对路径时,请确保资源的路径正确。
3. 服务器未配置url重写:Vue使用history模式时,URL是没有后缀的,例如`example.com/user/profile`,而非`example.com/#/user/profile`。这意味着服务器需要进行URL重写。例如,在Apache服务器上,可以通过.htaccess文件进行配置,确保所有请求都定向到index.html:
```
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```
以上是常见的解决方法,但具体原因和解决方法还要根据具体情况进行调试和处理。希望对你有帮助!
nginx部署vue项目重定向后url
回答: 当使用NGINX部署Vue项目时,可以通过配置代理服务器来解决请求跨域问题。在NGINX的配置文件nginx.conf中,可以使用server块来配置代理服务器。其中,可以使用location块来指定需要重定向的URL路径。例如,可以使用location /api来将/api路径下的请求转发给真正的后端服务器。另外,为了解决在刷新页面或访问路由配置页面时出现404错误的问题,可以使用try_files指令将访问重定向到index.html页面,并交由index.html处理对应的路由跳转。具体的配置可以参考引用\[1\]和引用\[2\]中的示例代码。\[1\]\[2\]
#### 引用[.reference_title]
- *1* [VUE项目配置API服务器的两种情况 + NGINX 配置VUE项目](https://blog.csdn.net/weixin_40079913/article/details/114629378)[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_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]
- *3* [Nginx 部署 vue项目 (history模式)](https://blog.csdn.net/yorcentroll/article/details/105404259)[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 ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)