1.安装nginx

请参考 Ubuntu 18.04安装nginx

2. 打包vue项目

在项目的根目录中找到 package.json 文件 中的 scripts 节点

在项目的根目录下执行

npm run bulid:prod

备注

其中 prod 是上图中配置的参数

3. 上传 dist

在执行完上一步命令后，项目的根目录中会生成一个 dist 目录，这个目录就是打包好的项目，将该目录上传值服务器中。

4.修改nginx配置文件

修改 /etc/nginx/sites-enabled/default

修改前

#server {
#       listen 80;
#       listen [::]:80;
#
#       server_name example.com;
#
#       root /var/www/example.com;
#       index index.html;
#
#       location / {
#               try_files $uri $uri/ =404;
#       }
#}

修改后

server {
       listen 80;
       listen [::]:80;

       server_name 127.0.0.1:80;  # 服务器域名或IP+端口

       root /data/blog/backend/dist;  # 打包后的dist目录
       index index.html;

       location / {
               try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
       }

		# 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
        location @router {
                rewrite ^.*$ /index.html last;
        }
}

备注

如果你需要代理的是80端口，需要将nginx的默认配置都注释掉，不然会直接跳转到nginx的欢迎页面。

5.重新加载配置文件

nginx -s reload

参考：https://www.jianshu.com/p/e148cf6b14fb