前提:一、nginx在服务器上已经安装。二、在idea上已打开vue工程
1.打包
在vue工程根目录录执行打包命令:npm run build,如下图
出现如下界面表示打包成功
打包文件为根目录下的dist文件,我们将dist文件夹压缩为zip文件,以便上传。
2.上传打包文件
在服务器上建立文件夹存放dist发布文件,在此笔者建立的发布文件路径为:/usr/local/webapp。上传dist.zip文件到该目录下,解压:
3.nginx配置
打开nginx配置文件,笔者的nginx配置文件路径为/usr/local/nginx/conf,打开配置文件nginx.conf 做如下配置:
4.重启nginx
进入nginx的sbin目录下执行命令 sudo ./nginx -s reload即可
5.验证
输入 http://服务器IP +nginx监听端口 即可访问vue前端页面