ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

vue nginx二级域名配置

2021-06-05 17:33:27  阅读:133  来源: 互联网

标签:index www vue admin 二级域名 nginx xxx com


一般来说项目会有一个前台和后台,前台用一级域名,后台用二级域名,比如一个项目的域名是www.xxx.com,访问www.xxx.com时自然会访问到前台的首页,而后台一般是www.xxx.com/xxx,一级域名自然很简单,但是配置二级域名(后台)时,就会报js css的404错误

  1. 在了解原因的时候我们先说一下nginx中root和alias的区别,root会根据完整的url请求来映射到目录中,而alias会把location后面配置的路径丢弃掉,把当前匹配到的目录指向到指定的目录,下面可以举个例子来说明一下:

location ~ ^/admin/ {
 root /home/wwwroot/www/index.html;
}

location ~ ^/admin/ {
 alias /home/wwwroot/www/index.html;
}

  root方式来部署,如果url访问的是:https://www.xxx.com/admin/index.html 那么实际到我们nginx中访问的路径是/home/wwwroot/www/admin/index.html,也就是root路径+location后面的路径
  alias方式来部署,如果url访问的是:https://www.xxx.com/admin/index.html 那么实际到我们nginx中访问的路径是/home/wwwroot/www/index.htm, 也就是alias路径将location路径换掉,相当于起别名
  2. 知道了root和alias的区别,那么还需要知道一个nginx的知识点,就是在nginx中只设置了根路径(下面的设置),还有上面的admin路径, 如果在浏览器中输入https://www.xxx.com/xxxxxxxxxxx,com后面的xxxx是随便输入的,那么nginx会将其当成根路径来处理,如果是https://www.xxx.com/admin,那么会把他当成admin路径来处理,那么当我们设置二级域名时,前端没有携带admin,那么就会当成根目录来寻找js css,那么自然后找不到,就会报404,既然知道了原因,那么自然就有处理的办法,那就是让前端请求js css时,携带admin参数如:https://www.xxx.com/admin就是跳到后台首页

location / {
 alias /home/wwwroot/www/index.html;
}

  3. 如果前端是用vue写的,那么打包时需要改两个地方,一个index.js中的参数assetsPublicPath,我这里改为SDK,那么后台的首页就是https://www.xxx.com/SDK,nginx里面的adim换成SDK,另一个route.js中的mode,不是使用history模式,而是使用hash模式,我这里将其注释掉了,具体看下图:
在这里插入图片描述
在这里插入图片描述
4. 到这里,前台的首页就是https://www.xxx.com,后台的首页就是https://www.xxx.com/SDK

标签:index,www,vue,admin,二级域名,nginx,xxx,com
来源: https://blog.csdn.net/qq_42874635/article/details/117599632

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有