這篇文章主要介紹了詳解基於Vue，Nginx的前後端不分離部署教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
有小夥伴私信問我vue項目是如何進行前後端不分離打包發佈的，那我豈能坐視不管，如此寵粉的我肯定是要給發一篇教程的，話不多說，開始操作
前端假如我們要發佈我們的Vue項目，假設我們前端用的是history路由(要發就發個全套的)，並且在後端帶有一個二級目錄，以便於可以在服務器上部署N個項目，在這裏後臺服務器的話，我用Nginx服務器來給大家模擬，接下來就面對疾風吧：
一、在這裏我前端vue項目使用vue cli腳手架進行搭建的，後臺使用Nginx，首先是前端配置：
1.前端配置,在這裏假如後端訪問的時候要訪問my-app文件夾下的打包好的dist文件夾，所以我們要在前端做一些配置
① 在vue.config.js文件中添加如下配置( 在這裏我們手動在src文件夾下面創建vue.config.js文件，相當於給webpack添加了新的配置 )：
baseUrl:'/my-app/'
② router路由的配置(相信你知道這個配置應該放到哪吧，畢竟都已經到了發佈的操作了)：
const router = new VueRouter({
mode:"history",
base:'/my-app/',
routes
})
2.接下來就是我們前端的打包
① 因爲在這裏我使用的vue cli搭的項目，所以直接執行yarn build進行打包，你會發現多了個dist文件夾，這裏面就是打包過後生成的文件
② 在這裏簡單解釋下打包後js和css文件自動加了版本號的基本作用：可以進行版本回退，唯一標識。
③ 在這裏我們 模擬 把打包好的文件夾交給後端，所以我將打包好的dist文件夾放到一個我創建好的文件夾nginx-root文件夾裏面，並且放到my-app文件夾
你看，它就安靜的躺在這裏，慈祥又安和
二、接下來就是我們後端服務器Nginx的操作
1.既然是教程，那就徹底手把手教學，第一步我們要先下載一個Nginx服務器，完全手把手，徹底手把手，不要九塊九，更不要九十九，別太感動
① 去nginx.org下載一個Nginx，在右側找到download點進去，在這裏我們可以下載Stable version下面的 nginx/Windows-1.14.1 這個版本，
鏈接地址：http://nginx.org/en/download.html
② 然後將下載好的壓縮包解壓後放到你的本地磁盤裏
③ 給Nginx配置環境變量，相信大家應該都知道怎麼配環境變量把，不知道怎麼配環境變量可以私聊我，在這裏就不做過多解釋了，直接講解下一步操作
2.開始Nginx的配置
① 在你的 nginx(應該是nginx-1.14.1)文件夾中 打開命令行，執行命令： start nginx
//開啓nginx服務器，執行完該命令後，如果你的命令控制工具閃了一下，並且光標懸停一閃一閃放光芒，此時你就可以在你的瀏覽器上輸入localhost，按下回車，如果出現了Welcome to nginx！，恭喜你，你已經成功開啓nginx服務器的封印了
② 在編譯器中，將你的 nginx文件夾下 找到 conf文件夾 ，然後進入到 nginx.conf文件，找到server，將server和括號裏面的內容用#註釋掉(註釋的時候要小心，不能註釋多也不能註釋少，一定要精準，精準你懂吧)
③ 在conf文件夾下創建一個 conf.d文件夾 (該名字隨意起)，在這裏我們可以在conf.d文件夾下創建一個 test.conf文件，在後期你可以創建多個.conf文件，來配置你的多個項目的server
④ 在nginx.conf文件中把這行代碼在http括號裏面找個地方放下，include後面跟的是你conf.d文件夾的絕對路徑，這句代碼的意思就是匹配下面所有的conf文件，這是我的，你把後面的路徑改成你的就可以，注意要把斜槓改成反斜槓/
include D:/nginx-1.14.1/conf/conf.d/*.conf //這是我的，你把路徑改成你的conf.d的絕對路徑就可以，注意斜槓是'/'不是'\'
⑤ 在你的test.conf文件中添加配置信息，這是配置信息的解釋，大家可以根據我的配置信息demo來配置你的
server {
listen 80; ------端口號
server_name localhost; ------域名
root 你的dist文件夾的絕對路徑; ------根
autoindex on; ------將你匹配的文件自動匹配到index.html
expires 1s; ------緩存(只是爲了演示才寫的)
charset utf-8;
location /匹配路徑{
proxy_pass 接口反向代理的目標target; ------在這裏配置你的反向代理，若要配置多個代理路徑，將此代碼複製多個修改即可
}
location / {
try_files $uri $uri/ /index.html; ------這是從vue官網抄過來的配置，意義在於保證一旦我們的路由刷新的時候一旦後端找不到對應的路由，將自動跳轉到index.html文件
}
}
- 我貼出來一個配置信息demo，大家可以根據這個demo來修改你的
server {
listen 80;
server_name localhost;
root E:/nginx-root/dist;
autoindex on;
charset utf-8;
location /index/hotsShowList {
proxy_pass http://www.baidu.com;
}
location / {
try_files $uri $uri/ /index.html;
}
}
6.最後，準備享受成功的喜悅
重啓Nginx服務器，瀏覽器訪問localhost:你的端口號，在這裏我設置的是默認值80，你的可以隨意，不過最好也設成80把，當你按下回車的那一刻，你的項目已經跑起來了，恭喜你，部署成功，現在，雙手離開鍵盤，摘下你的耳機，可以歡呼了！！！
三、最後給大家做個小結，總結一下本地部署用到的一些命令
start nginx //開啓nginx服務 nginx -s stop //關閉nginx服務，(你可以關閉服務再重新開啓服務來達到重啓nginx服務的效果) yarn build //打包vue項目到dist文件夾下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。