Nginx配置单页应用
同端口多项目配置
假设我们有两个单页项目，一个pc官网，一个mobile官网，我们都想跑在上期8082端口上，这时候发现我们上一期部署的文件夹是直接放在www目录下的，这可不行，文件全放这下面都不能区分是哪个项目的了，万一文件夹或者文件名字一样，就覆盖掉了。
那么有两种方案：
- 各大cli脚手架上都有输出文件夹的设置，比如vue-cli的outputDir，这个可以设置文件夹名。
- 在www目录下新建对应项目的文件夹，scp上传上传到对应文件夹。
这里我们使用一下方案1，方案二类似，路径不同而已。
修改打包配置
由于我们是在同一个端口下跑的项目，那么我们只能通过路径区分不同项目。
比如我们的项目在http://localhost:8082/mobile下跑，那么vue-router添加base配置：
new VueRouter({
mode: 'history',
base: '/mobile', // pc同理
...
)}当然我更建议你把这个路径值放入.env文件里，.env.dev:
BASE_URL=/mobile修改配置为：
new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
...
)}
// history: createWebHistory(process.env.BASE_URL) // 4.0+vue.config.js：
module.exports = {
publicPath: process.env.BASE_URL, // 这个是打包后外部文件链接追加值，比如'/mobile'，那么最后的js和css链接为'/mobile/js/xxxx.js'
outputDir: 'mobile', // 这个是打包输出文件夹名
...
}进行项目打包，会得到一个mobile文件夹，我们使用scp进行文件上传（pc同理）
scp -r ./mobile root@$host:~/nginx/www/; # 上传mobile文件Nginx配置修改
location /pc {
alias /usr/share/nginx/html/pc/;
index index.html;
}
location /mobile {
alias /usr/share/nginx/html/mobile/;
index index.html;
}重启nginx，docker restart web，此时访问http://localhost:8082/mobile/，网页能正常打开，当时我们访问http://localhost:8082/mobile却发现被诡异的重定向到了80端口，也就是http://localhost/mobile/，查看一下浏览器请求发现被301永久重定向了。
这是由于Nginx在访问URI时；如果访问资源为一个目录，且结尾没有/，那么Nginx会进行一个301重定向到结尾带有'/'的地址，跳转时可以通过port_in_redirec设置跳转端口号，没有的话则从listen里取，也就是80，故这里进行了80的重定向，我们可以在server模块中添加absolute_redirect off;关闭这个重定向。
设置之后重启Nginx，我们通过http://localhost/mobile和http://localhost/pc都能访问对应项目。
spa单页跳转刷新白屏
我们在上面进行了多项目配置，但是还有一个问题没有解决，这个问题很常见，就是跳转后刷新的白屏问题，很多同学不敢从hash路由切换到history路由也是有此原因。
简单描述一下问题吧：我们直接打开项目的根路径地址访问正常，比如上面的http://localhost/mobile，刷新也正常显示，我们点击跳转到http://localhost/mobile/list，此时也正常跳转，但是我们在这个地址进行原地刷新时，会出现404错误，或者说我们直接用浏览器打开http://localhost/mobile/list也会出现404，这个问题呢算比较严重的了，也就是我们能直接打开或者刷新的只有根路径，其他路径都会出现404的问题。
404的原因
首先我们的网页访问都是一个get请求，你可以理解为获取一个静态资源，我们看一下Nginx的location配置：
location /pc {
alias /usr/share/nginx/html/pc/;
index index.html;
}当我们的URI地址匹配到了/pc，会在alias的路径中查找，默认文件去找index指令后面的的index.html，比如我们访问http://localhost/mobile能正常访问，是因为mobile目录下确实有index.html这个实体文件，那么正常返回了，而访问http://localhost/mobile/list，Nginx就会去找mobile/list/index.html，很显然没有这个东西，故返回404。
总结一下就是：spa的路由是由js生成的，并不会有对应路径的实体文件，而Nginx访问网页的实体资源，找不到就会返回404，那么也就是这个路径是交由我们的js来处理，而不是交由Nginx处理，所以我们只需要在Nginx找不到路径的实体文件时把我们的index.html返回回去就行了。
location /pc {
alias /usr/share/nginx/html/pc/;
try_files $uri $uri/ /pc/index.html;
index index.html;
}try_files指令会依次查找后面的文件，直到找不到，$uri是原地址，$uri/是$uri/index.html，剩下的就是/pc/index.html，举个例子http://localhost/pc/aaa.png，会先去查找http://localhost/pc/aaa.png，找不到的话查询http://localhost/pc/aaa.png/index.html，最后则是http://localhost/pc/index.html
ok，这样spa白屏问题就解决了，但是还有一个微小的问题，那就是当我们访问的路径确实不存在（spa-router也没有），路径不是Nginx处理了，那么此时404也就不存在了，会出现白屏，不过聪明的同学已经想到了众多router都会在最后加个通配符来匹配404的页面，那么404的页面也就交给我们自己写了。
root和alias
这个算是一个补充吧，说一下root和alias的区别，毕竟很多配置用的root，请注意alias只能在location中使用，而root可以配置在http，server，location中使用。
其实root和alias都是Nginx指定文件路径的指令，以上面的例子：
# root
location /pc {
root /usr/share/nginx/html;
try_files $uri $uri/ /pc/index.html;
index index.html;
}
# alias
location /pc {
alias /usr/share/nginx/html/pc/;
try_files $uri $uri/ /pc/index.html;
index index.html;
}这两个的匹配规则一样的，简单来说就是root会把location后面配置的路径加上，alias则是去除掉，也就是说二者的文件路径都是指向根目录下的pc文件夹，也就是说使用root的location匹配的路径必须真实存在（因为追加了），如果root出现404了直接看path的目录是否存在就行了。
不过需要注意一点就是alias的路径结尾需要有个/，虽然这里加不加都没问题，但这是一个良好的习惯，请保持，否则遇到下面这种情况就会出错。以下面例子分别访问http://localhost:8082/image/logo.png，最后一个会404：
location /image/ {
alias /usr/share/nginx/html/image/;
}
location /image {
alias /usr/share/nginx/html/image/;
}
location /image {
alias /usr/share/nginx/html/image;
}
location /image/ { # 这里会404
alias /usr/share/nginx/html/image;
}本文地址：https://xuxin123.com/web/nginx-spa
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
