[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fQclzfU8Q16NokEg1GsuCPi9RXSgxy3jDjj7ToWs_gqY":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},26,"2024-01-29T14:14:06.03Z","在nginx上部署vue项目时该如何配置nginx.conf文件","# 一、配置nginx环境\n## 选择一：本地安装nginx\n可以在本地安装nginx环境进行模拟，windows上可以安装虚拟机环境，Mac由于是类unix系统，可以直接安装nginx，平台上有Mac上原生安装nginx的教程，大家可以参考[在Mac上原生玩一把Nginx](https://www.xinwei.ltd/article/19)。\n\n## 选择二：直接使用云服务器\n如果购买了云服务器，当然可以在centos类似的系统中进行安装nginx环境，阿里云还有腾讯云上，都可以搜索到对应的安装方法，这里不赘述了。\n\n## 选择三：使用docker【推荐】\ndocker这样的容器技术，让环境配置省去了极其多的时间，一键命令构建环境，更是避免了原生安装过程中可能出现的一系列问题。\n具体的步骤可以参考本平台上的文章：[Mac上操作，使用yml文件制作docker compose nginx](https://www.xinwei.ltd/article/18)\n\n# 二、端口\n对于前端网页项目，往往直接通过80端口进行访问，这样子就可以不用在网页url中包含其他的非80端口号来使用。\n（如果一个云服务器上配置多个前端网页项目，都通过80端口访问，当然也是可以的，后面有时间我再出一个文章）\n## 2.1 本地环境\n本地的nginx环境下，可以自行定义使用哪个端口来访问前端项目。\n\n## 2.2 云服务器\n需要防火墙放开80端口访问，一般默认开启了，但还是检查一下\n\n## 2.3 docker环境\n参考前面给出的链接文章中的端口绑定，可以自行指定宿主机哪个端口号和容器中的80端口进行绑定。当然宿主机最好也是使用80端口。\n\n# 三、vue项目处理\n## 3.1 vue项目中的publicPath\n一般默认为“/”，表示直接从根域名直接访问，比如:https://www.baidu.com/。\n\n如果是包含路径的访问，比如：https://www.baidu.com/business，那么publicPath应该配置为:\"/business\"。\n\n如果被设置为空字符串 ('') 或 ('./')，那么所有的产物都会使用相对路径，打出来的包可以被部署在任意路径上。\n\n## 3.2 打包vue项目\nvue项目或者react项目，最终build出来的包，都是js、css、html或者有图片及其他文件的一个文件夹。一般不指定生成目录名的情况下，vue项目的产物文件夹名字为dist。\n\n## 3.3 产物在nginx中的位置\nnginx的根目录，即nginx.conf这个文件所在的目录，这里会有一些文件夹：etc、logs、conf.d、html等，当然可以自己再创建一些文件夹。\n![本地环境为例](https://image.xinwei.ltd/%E6%88%AA%E5%B1%8F2024-01-29%20221706536986833.png)\n\n你可以放在你想放的文件夹下，在nginx.conf中指定的路径会以这个根目录为相对路径。\n\n以下图为例：\n![](https://image.xinwei.ltd/%E6%88%AA%E5%B1%8F2024-01-29%20221706537189380.png)\n这里以official项目为例，其中放的就是dist文件夹中的所有内容。那么我们在nginx中会配置一个路径。\n\n# 四、nginx配置\n一个具体简单的配置如下（后面会有官方的写法）：\n```nginx.conf\n... // 省略以上内容\ngzip  on;\n\n    server {\n        listen       80;\n        server_name  localhost;\n\n        #charset koi8-r;\n    charset utf-8;\n\n        #access_log  logs/host.access.log  main;\n\n        location /  {\n            root   html/official;\n            index  index.html index.htm;\n        try_files $uri $uri/ @routers; // 这里比较重要\n        }\n    location @routers { // 这里是为vue的路由跳转做配置\n        rewrite ^.*$ /index.html last;\n     }\n\n        #error_page  404              /404.html;\n        ... // 省略后面的其他\n```\n\n上面的routers写法，不一定适用于所有人的项目，如果上面大家的配置不可行，可以尝试下面的配置：\n```nginx.conf\nserver {\n    listen       80;\n    server_name  localhost;\n    location / {\n      root   /app;\n      index  index.html;\n      try_files $uri $uri/ /index.html;\n    }\n    error_page   500 502 503 504  /50x.html;\n    location = /50x.html {\n      root   /usr/share/nginx/html;\n    }\n  }\n```\n\n以上。\n\n\n\n","vue项目经过build出来的dist文件夹，如何部署到云服务器，成功让浏览器可以访问到这个vue项目。这里给出已有的配置供大家参考。","https://image.xinwei.ltd/%E6%88%AA%E5%B1%8F2024-01-29%20221706536986833.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",30,{"id":24,"name":26,"parentId":21},"Nginx",[],"",727,0,"vue,vue dist,vue build"]