最近寫了一個前后端分離的項目，前端用的是vue，因此記錄一下將該項目部署到服務器的整個過程。
1.首先，在控制臺輸入npm run build命令（或者npm run build:prod)。該命令用于將前端vue打包。打包后的文件是dist文件夾。（開發(fā)階段的一些配置在打包后會失效，比如開發(fā)階段配置的后端域名和端口，下文會給出解決方法）
?
?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;
}第二部分是將后端請求指向后端項目。在前端項目中我會發(fā)送請求給后端程序請求數據，如：127.0.0.1：8080/user/login,在開發(fā)階段我們可以在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文件夾中。
文章來源：http://www.zghlxwxcb.cn/news/detail-513916.html
?4.最后一步就是啟動后端程序，我用的java，啟動命令是java -jar xxx.jar文章來源地址http://www.zghlxwxcb.cn/news/detail-513916.html
到了這里，關于vue項目打包部署在windows或linux服務器上的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
