Nginx发布Vuejs项目

2 篇文章 0 订阅
1 篇文章 0 订阅

1、问题描述

给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”。比如访问:http://localhost:8081/user/login,访问即报404错误,这个实际上是请求HTML相关资源而非后台接口,后面网上查了相关资料找到了解决办法。

2、配置文件

复制代码

 1     upstream portalServer {
 2         server 192.168.1.1:8080;
 3     }
 4     
 5     server {
 6         listen       8081;
 7         server_name  localhost;
 8 
 9         root   /usr/local/application/nginx/web/build;
10         
11         location / {
12             try_files $uri $uri/ @router;
13             index  index.html;
14         }
15         
16         location @router{
17             rewrite ^.*$ /index.html last;
18         }
19         #代理后台接口
20         location /api/ {
21             proxy_pass http://portalServer/;
22             proxy_set_header Host $host:$server_port;
23         }
24 
25         error_page   500 502 503 504  /50x.html;
26         location = /50x.html {
27             root   html;
28         }
29     } 

复制代码

3、参考网站

https://my.oschina.net/u/1760791/blog/1575808

http://blog.sina.com.cn/s/blog_bd418dfa0102wser.html

引用网址:https://www.cnblogs.com/mao2080/p/9340026.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: nginx 是一个常用的高性能的开源 Web 服务器软件,它可以用来发布前端项目。在发布前端项目时,可以通过在 nginx 的配置文件中设置别名来实现。 别名是 nginx 配置文件中的一个指令,它可以用来指定前端项目文件的路径,使得在访问前端项目时可以使用自定义的 URL 路径。 在 nginx 的配置文件中添加别名的语法如下: ```bash location /别名 { alias /前端项目路径; } ``` 其中,`别名` 是自定义的 URL 路径,可以根据需要设置。`前端项目路径` 是前端项目的文件路径,需要根据实际情况进行设置。 举个例子,假设我们有一个前端项目的文件路径是 `/var/www/html/myproject`,我们想要通过 URL 路径 `/project` 来访问该项目,那么可以在 nginx 的配置文件中添加如下的配置: ```bash location /project { alias /var/www/html/myproject; } ``` 配置完成后,当访问 `http://localhost/project` 时,nginx 将会返回前端项目的内容。 通过设置别名,我们可以灵活地指定前端项目路径,使得在访问前端项目时可以使用更简洁、易于理解的 URL 路径。这样不仅可以提高项目的可读性,也能够更好地维护和管理前端项目。 ### 回答2: 在使用nginx发布前端项目时,我们可以通过配置别名来指定项目的访问路径。 首先,我们需要编辑nginx的配置文件,可以在nginx的安装目录下找到名为nginx.conf的文件。在该文件中找到server块,这是nginx配置的主要部分。 在server块中,我们可以使用location指令来配置前端项目的别名。例如,假设我们的前端项目位于/var/www/html目录下,我们可以使用以下配置来定义别名: location /项目名 { alias /var/www/html; } 在上述配置中,/项目名 是我们要给项目指定的别名,alias指令后面是项目的实际路径。 完成配置后,我们需要重启nginx使其生效。可以通过运行以下命令来重启nginx: sudo service nginx restart 此时,我们可以通过访问http://服务器ip地址/项目名 来访问前端项目。通过配置别名,可以方便地指定项目的访问路径,使得前端项目能够直接通过项目名进行访问,而无需指定完整的项目路径。 总结起来,nginx发布前端项目时,可以通过配置别名来指定项目的访问路径。首先编辑nginx的配置文件,然后在server块中使用location指令来配置别名。最后重启nginx使其生效,可以通过访问http://服务器ip地址/项目名 来访问前端项目。 ### 回答3: 在nginx发布前端项目的别名是通过设置nginx的location指令来实现的。在nginx的配置文件中,可以使用location指令来定义前端项目路径,并可以指定别名。 例如,将前端项目路径设置为"/var/www/html",并指定别名为"/static",可以在nginx的配置文件中添加以下代码: ``` location /static { alias /var/www/html; index index.html; } ``` 上述配置中,当访问服务器的/static路径时,nginx将会将请求映射到/var/www/html目录下寻找对应的文件。如果存在index.html文件,则会直接返回该文件,如果不存在则返回404错误。 通过设置别名,可以使前端项目的访问更加友好和简洁。我们可以使用简短的URL来访问前端项目,而不需要暴露实际的项目路径信息。 此外,还可以通过添加更多的location指令来配置其他的前端项目路径和别名,以满足不同前端项目的需求。当然,在修改nginx配置文件后,需要重新加载配置文件使其生效。 总之,通过设置nginx的location指令并指定别名,可以将前端项目发布到指定的路径,并使用别名来访问项目,提高了访问的简洁性和安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值