实现两个项目Nginx多location实现多个静态资源的访问

实现在一台服务器上使用nginx部署多个前端项目的方法主要有三种
基于域名配置
基于端口配置
基于location配置

基于location配置
目的
根据url不同，匹配不同的前端项目。比如有两个项目A和B，我们希望访问localhost:8000/projectA来访问项目A，访问localhost:8000projectB来访问项目B。

实现
强调一下，实现以上目的是需要你的项目和nginx的配置同时修改的，这里我以vue项目为例，来演示一遍。

vue.config.js
vue.config.js中的publicPath:设置项目的根路径，用于指定部署时的基础URL。默认情况下，Vue CLI会假设你的应用是被部署在一个域名的根路径上，例如 /。

A项目

module.exports = {
   
  publicPath: '/projectA/',
  transpileDependencies: true,
}

B项目

module.exports = {
   
  publicPath: '/projectB/',
  transpileDependencies: true,
}

nginx.conf的server节点配置
这里有几个需要强调的地方：

• nginx安装目录下有一个html文件夹，我们把A、B两个项目打包后文件夹dist放在这个文件夹下并且分别重命名为projectA和projectB；
• 只有location /下用root, location /projectA和 location /projectB的配置是用alias！！！，root和alias的区别请自行查询。
  alias 只能配置在location 中，后面必须要以 “/” 结尾, 否则会查找不到文件, 报404错误; 而 root 对 “/” 可有可无。
• 如果请求的路径不匹配任何已配置的location块，最后的location /块将会处理这些请求。在这个示例中，它将会服务于默认的前端项目，你可以根据需要进行调整。
  路径顺序很重要，Nginx将会使用第一个匹配的location块来处理请求。

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs