nginx部署vue前端打包项目

一、nginx安装

安装说明见：Nginx使用命令安装说明-CSDN博客

二、打包文件上传部署

将vue打包后的静态文件进行上传，打包后的目录如下：

将文件路径进行调整，将favicon.ico和index.html文件全部移动至assets目录，并将该目录打包上传至服务器的nginx目录： /usr/local/nginx/html

打包后如下：

assets里面的内容：

上传后：

解压文件：

unzip assets.zip

三、配置nginx.cnf

修改nginx配置文件：/usr/local/nginx/conf/nginx.conf

将server部分替换为如下内容：

server {# nginx启动监听的端口listen       8083;# 可以是localhost和可以是本机ip地址，如果要给公司其他同事的电脑可以访问，需要 配置为本机的ip地址server_name  192.168.110.112;# 配置页面中发送的请求代理到后端接口        location /demo/ {# rewrite  ^.+api/?(.*)$ /$1/api break;proxy_pass http://192.168.110.112:8081/demo/;     # 后端的请求接口}location / {#程序根目录配置，也就是刚刚打包文件放置的目录root   /usr/local/nginx/html/assets;index  index.html index.htm;# 配置把所有匹配不到的路径重定向到index.html，vue-router的mode是history模式的情况下需要配置，否则会出现刷新页面404的情况try_files $uri $uri/ /index.html;}}

里面的信息请酌情修改，其中8083就是前端的访问接口

四、启动nginx

nginx

五、访问页面

访问 http://192.168.110.112:8083 就可以访问前端页面啦！