一、配置nginx环境

选择一：本地安装nginx

可以在本地安装nginx环境进行模拟，windows上可以安装虚拟机环境，Mac由于是类unix系统，可以直接安装nginx，平台上有Mac上原生安装nginx的教程，大家可以参考在Mac上原生玩一把Nginx。

选择二：直接使用云服务器

如果购买了云服务器，当然可以在centos类似的系统中进行安装nginx环境，阿里云还有腾讯云上，都可以搜索到对应的安装方法，这里不赘述了。

选择三：使用docker【推荐】

docker这样的容器技术，让环境配置省去了极其多的时间，一键命令构建环境，更是避免了原生安装过程中可能出现的一系列问题。
具体的步骤可以参考本平台上的文章：Mac上操作，使用yml文件制作docker compose nginx

二、端口

对于前端网页项目，往往直接通过80端口进行访问，这样子就可以不用在网页url中包含其他的非80端口号来使用。
（如果一个云服务器上配置多个前端网页项目，都通过80端口访问，当然也是可以的，后面有时间我再出一个文章）

2.1 本地环境

本地的nginx环境下，可以自行定义使用哪个端口来访问前端项目。

2.2 云服务器

需要防火墙放开80端口访问，一般默认开启了，但还是检查一下

2.3 docker环境

参考前面给出的链接文章中的端口绑定，可以自行指定宿主机哪个端口号和容器中的80端口进行绑定。当然宿主机最好也是使用80端口。

三、vue项目处理

3.1 vue项目中的publicPath

一般默认为“/”，表示直接从根域名直接访问，比如:https://www.baidu.com/。

如果是包含路径的访问，比如：https://www.baidu.com/business，那么publicPath应该配置为:"/business"。

如果被设置为空字符串 ('') 或 ('./')，那么所有的产物都会使用相对路径，打出来的包可以被部署在任意路径上。

3.2 打包vue项目

vue项目或者react项目，最终build出来的包，都是js、css、html或者有图片及其他文件的一个文件夹。一般不指定生成目录名的情况下，vue项目的产物文件夹名字为dist。

3.3 产物在nginx中的位置

nginx的根目录，即nginx.conf这个文件所在的目录，这里会有一些文件夹：etc、logs、conf.d、html等，当然可以自己再创建一些文件夹。

你可以放在你想放的文件夹下，在nginx.conf中指定的路径会以这个根目录为相对路径。

以下图为例：

这里以official项目为例，其中放的就是dist文件夹中的所有内容。那么我们在nginx中会配置一个路径。

四、nginx配置

一个具体简单的配置如下（后面会有官方的写法）：

... // 省略以上内容
gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
    charset utf-8;

        #access_log  logs/host.access.log  main;

        location /  {
            root   html/official;
            index  index.html index.htm;
        try_files $uri $uri/ @routers; // 这里比较重要
        }
    location @routers { // 这里是为vue的路由跳转做配置
        rewrite ^.*$ /index.html last;
     }

        #error_page  404              /404.html;
        ... // 省略后面的其他

上面的routers写法，不一定适用于所有人的项目，如果上面大家的配置不可行，可以尝试下面的配置：

server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }

以上。