标签：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。