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二级域名配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！