vue前端项目打包和部署

一、打包

1.在项目终端使用npm run build命令进行打包，打包完成后我们会在左边的项目文件夹中得到dist文件夹，找到这个文件夹的位置，后续我们会用到。在打包前要将node_modules文件夹删除，否则你打包后的dist文件会非常大。

二、部署

前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。

1.下载nginx

官网地址nginx

2.启动nginx

nginx压缩包解压后双击nginx.exe,之后会闪过一个小弹窗。

通过在浏览器中访问localhost路径，出现以下页面则代表nginx启动成功。

将打包的前端项目文件夹复制到nginx文件夹里面，复制dist文件夹的路径，后面会用到

点击conf文件夹

用记事本打开conf文件夹下面的nginx.conf

在nginx.conf里面配置下面的代码

server {  

    listen 8080;  

    server_name localhost;  

    location / {  

        # 这里配置前端项目的静态文件路径  

        root /这里需要替换自己前端项目路径/dist;  

        index index.html;  

        try_files $uri $uri/ /index.html; # 解决 Vue 路由刷新 404 问题  

    }  

    location /api/ {  

        # 这里配置代理到后端服务器的规则  

        proxy_pass http://localhost:8887/;  

        proxy_set_header Host $host;  

        proxy_set_header X-Real-IP $remote_addr;  

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  

        proxy_set_header X-Forwarded-Proto $scheme;  

        # 如果后端需要特定的请求头，可以在这里添加  

        # proxy_set_header Some-Header $some_variable;  

        # 去掉 /api/ 前缀  

        rewrite ^/api/(.*)$ /$1 break;  

    }  

}

点击保存后，在nginx文件夹里面通过cmd命令进入终端输入nginx -s reload命令。

输入上面的命令后返回浏览器刷新就会出现你的前端项目页面了