上一期咱们讲了如何在一个新服务器上用Nginx跑起一个前端我的项目，然而还有很多缺点，比方咱们想在这个Nginx下跑多个我的项目怎么办，spa单页我的项目常见的刷新空白起因及解决等等，本篇将一一介绍。
同端口多我的项目配置
假如咱们有两个单页我的项目，一个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指定文件门路的指令，以下面的例子：
# rootlocation /pc { root /usr/share/nginx/html; try_files $uri $uri/ /pc/index.html; index index.html;}# aliaslocation /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;}下一篇我会介绍单页利用在Nginx上的加载优化，尽请期待。
本系列更新只有利用周末和下班时间整顿，比拟多的内容的话更新会比较慢，心愿能对你有所帮忙，请多多star或点赞珍藏反对一下
本文地址：https://xuxin123.com/web/nginx-spa