Javascript

vue nginx二级域名配置

本文主要是介绍vue nginx二级域名配置,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一般来说项目会有一个前台和后台,前台用一级域名,后台用二级域名,比如一个项目的域名是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

这篇关于vue nginx二级域名配置的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!