vue项目打包部署在windows或linux服务器上-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目打包部署在windows或linux服务器上。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近写了一个前后端分离的项目，前端用的是vue，因此记录一下将该项目部署到服务器的整个过程。

1.首先，在控制台输入npm run build命令（或者npm run build:prod)。该命令用于将前端vue打包。打包后的文件是dist文件夹。（开发阶段的一些配置在打包后会失效，比如开发阶段配置的后端域名和端口，下文会给出解决方法）

vue项目打包部署在windows或linux服务器上

2.打包完成之后，就可以用nginx来部署前端项目了。nginx在这里的作用是反向代理，说得具体一点就是将我们服务器上的文件比如C://dist/index.html映射为127.0.0.1:9000，nginx的安装很简单我就不赘述了，主要说一下nginx.conf的配置。

    server {
        listen       9000;
        server_name  localhost;

        location /user/ {
            proxy_pass   http://127.0.0.1:8080/user/;
        }

		location /workOrder/ {
            proxy_pass   http://127.0.0.1:8080/workOrder/;
        }
		
		location / {
            root   C://dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

上面nginx.conf的配置分为两个部分，第一个部分是实现前端vue的映射，即将C://dist/index.html映射为127.0.0.1：9000。

location / {
            root   C://dist;
            index  index.html index.htm;
        }

第二部分是将后端请求指向后端项目。在前端项目中我会发送请求给后端程序请求数据，如：127.0.0.1：8080/user/login,在开发阶段我们可以在vue.config.js中配置后端ip和端口，但是打包后这些配置会失效，因此，我们需要通过nginx将后端请求指向后端项目。在我的后端有两种前缀user和workOrder，因此，配置如下。

location /user/ {
            proxy_pass   http://127.0.0.1:8080/user/;
        }

		location /workOrder/ {
            proxy_pass   http://127.0.0.1:8080/workOrder/;
        }

至此，前端项目就已经部署完成了。

3.后端程序部署，后端程序打包命令为：mvn clean package，打包后的程序在项目目录下的target文件夹中。

vue项目打包部署在windows或linux服务器上