部署环境:win10

第一步:nginx下载

下载地址http://nginx.org/en/download.html

nginx文件目录

nginx部署前端_linux

点击nginx.exe启动程序开启nginx,默认端口为80

成功访问:http://localhost/

nginx部署前端_tomcat_02

第二步:编译前端项目

前端采用vue框架进行开发,将项目编译成静态文件【html、css、js】

vue项目目录结构

nginx部署前端_linux_03

修改位置1:config/index.js

vue默认打包生成的静态文件存放在dist目录中,修改配置将dist目录重命名

nginx部署前端_nginx_04

运行vue编译命令:npm run build ,会将静态文件生成在pdf目录中

修改位置2:src/router/index.js

在路由配置文件中新增路由基础路径

nginx部署前端_nginx_05

然后运行命令编译vue项目

npm run build

第三步:配置nginx

将vue编译后的静态文件目录pdf移动到nginx/html下,修改nginx配置文件,使root指向pdf目录 

配置位置:conf/nginx.conf

nginx部署前端_linux教程_06

使用命令重新加载nginx配置【在nginx目录下运行命令】

nginx -s reload

第四步:访问 

http://localhost/pdf/