Nginx部署Vue项目添加访问后缀方式
更新时间：2025年01月24日 09:10:57 作者：星巡打杂工
文章介绍了如何根据需要为Vue项目配置不同的访问路径,并通过Nginx进行相应的配置,通过设置`vue.config.js`中的`publicPath`和`route`的`base`为`/app`,并将打包后的文件放入指定目录,然后在Nginx配置中使用`alias`和`try_files`指令来处理路径
Nginx部署Vue项目添加访问后缀
有时候会根据需要，区分不同的vue项目，这样要加一个后缀，不加后缀，访问是http://localhost/，加一个后缀，app，访问路径就是http://localhost/app
一、vue工程配置
1.vue.config.js publicPath 配置为 /app/
2.route配置base为 /app,model为history
将打包后vue工程文件放入 /usr/share/nginx/html/app 目录
二、nginx配置
server {
listen 80;
server_name ip地址或域名;
location /app {
alias /usr/share/nginx/html/app/;
try_files $uri $uri/ /app/index.html;
}
}三、重启nginx
再访问时就要加上 app后缀了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Nginx配置Https免费证书访问步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Nginx RTMP是一个Nginx插件,支持将RTMP和HLS流添加到媒体服务器,本文将以ubuntu为例为大家介绍一下如何安装使用nginx Rtmp 插件的步骤,需要的可以参考下2023-10-10
Nginx配置SSL证书出现PEM_read_bio_PrivateKey() failed错误解决
在配置GoDaddy的SSL证书并启动Nginx时,可能遇到由于证书密钥文件编码问题导致的启动失败,具体表现为nginx报错：PEM_read_bio_PrivateKey() failed,本文就来介绍一下,感兴趣的可以了解学习2024-10-10
Nginx的proxy_cache模块提供了强大而灵活的缓存功能,本文主要介绍了深入理解Nginx的proxy_cache模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要介绍了LNMP 解决Access Denied错误详细介绍的相关资料,需要的朋友可以参考下2016-10-10
本文主要介绍了Nginx反向代理时遇到60秒超时报错的问题,经过排查发现是由于代理服务执行时间过长导致的,具有一定的参考价值,感兴趣的可以了解一下2025-02-02
这篇文章主要介绍了Nginx使用反向代理实现负载均衡过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本文主要介绍了使用Nginx新版的stream方式,实现TCP/UDP代理转发,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-10-10
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
这篇文章主要介绍了基于nginx实现上游服务器动态自动上下线无需reload,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了nginx add_header指令使用方法，nginx配置文件通过使用add_header指令来设置response header,需要的朋友可以参考下2014-03-03
最新评论