本地编译
查看项目README.md文件，找到编译命令
打开vscode，右击项目，Open in Integrated Terminal，输入以下代码回车运行。
npm run build 
把生成的dist文件夹上传到服务器上，我放到了mss/mss_admin/dist里。
服务器安装nginx
下载nginx并安装。
sudo apt-get install nginx 新建项目的配置文件
首先确定配置文件的位置whereis nginx
ubuntu@VM-12-4-ubuntu:~$ whereis nginx nginx: /usr/sbin/nginx #主程序 /usr/lib/nginx #软件的函数库 /etc/nginx #存放配置文件 /usr/share/nginx #存放静态文件 /usr/share/man/man8/nginx.8.gz #联机帮助文件 配置文件的介绍可以看nginx.conf 配置文件 ，更详细的可以看官网对配置文件的介绍。简单来说main context下包含events,http,mail模块，http模块之下有 server , server模块之下有 location，他们各有各的作用。
所有的配置包括虚拟主机也要在此 /etc/nginx /nginx.conf文件中配置，这样虚拟主机多了就会不方便管理。所以我们要拆分成多个文件。在nginx.conf的http模块之下include /etc/nginx/conf.d/*.conf;表示我们可以把server模块写进conf.d目录之下。常用的命名规则：项目名+二级域名+端口.conf 。我自己的项目是mss，二级域名是wsscy，端口号是3000，就这样写就好。
touch mss-wsscy-3000.conf 3.填写项目的配置文件
vim mss-wsscy-300.conf 4.按“i”进入编辑模式，新增内容之后，保存退出按esc + ”:wq“ +enter 。
server { listen 80; #监听端口号，80是HTTP默认端口号 server_name 121.5.244.248; #主机地址或者域名 set $project_root /message_board; location / { #配置vue首页访问路径 index index.html index.htm ; #首页 root $project_root/dist; #首页存放位置 try_files $uri $uri/ /index.html; #目标路径找不到，重定向到index.html 中 } location ^~/api/ { #vue通过proxyTable解决跨域问题,前缀是api(案例https://www.jianshu.com/p/f03a5f2eda5a) add_header Access-Control-Allow-Origin *; #表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #允许请求的方法 add_header Access-Control-Allow-Credentials true; #响应头表示可以将对请求的响应暴露给页面。 proxy_set_header X-NginX-Proxy true; #proxy_set_header只是添加了传送给上游服务的http header rewrite ^(.*)api(.*)$ $1/$2; break; # $为api前的字符串，$2为api后的字符串。相当于直接去掉api，保留前后的路径不变。详解（https://blog.51cto.com/jiuwo/2313252） proxy_pass http://XXX.XXX.XXX.XXX:XXXX; #反向代理，填目的ip和端口号 } } 5.重启服务器
service nginx restart 6.打开ubuntu的浏览器测试一下已经可以打开了 localhost:80(80可以省略)。
在我的win10电脑输入ip也可以访问了：http://121.4.237.204/(也可以直接输域名：www.wsscy.ltd)
前端部分至此部署完成。
原文链接：https://blog.csdn.net/weixin_44532671/article/details/114665534
