有小伙伴私信問我vue項(xiàng)目是如何進(jìn)行前后端不分離打包發(fā)布的，那我豈能坐視不管，如此寵粉的我肯定是要給發(fā)一篇教程的，話不多說，開始操作

前端假如我們要發(fā)布我們的Vue項(xiàng)目，假設(shè)我們前端用的是history路由(要發(fā)就發(fā)個(gè)全套的)，并且在后端帶有一個(gè)二級(jí)目錄，以便于可以在服務(wù)器上部署N個(gè)項(xiàng)目，在這里后臺(tái)服務(wù)器的話，我用Nginx服務(wù)器來給大家模擬，接下來就面對(duì)疾風(fēng)吧：

一、在這里我前端vue項(xiàng)目使用vue cli腳手架進(jìn)行搭建的，后臺(tái)使用Nginx，首先是前端配置：

1.前端配置,在這里假如后端訪問的時(shí)候要訪問my-app文件夾下的打包好的dist文件夾，所以我們要在前端做一些配置

① 在vue.config.js文件中添加如下配置( 在這里我們手動(dòng)在src文件夾下面創(chuàng)建vue.config.js文件，相當(dāng)于給webpack添加了新的配置 )：

baseUrl:'/my-app/'

② router路由的配置(相信你知道這個(gè)配置應(yīng)該放到哪吧，畢竟都已經(jīng)到了發(fā)布的操作了)：

const router = new VueRouter({
  mode:"history",
  base:'/my-app/',
  routes
})

2.接下來就是我們前端的打包

① 因?yàn)樵谶@里我使用的vue cli搭的項(xiàng)目，所以直接執(zhí)行yarn build進(jìn)行打包，你會(huì)發(fā)現(xiàn)多了個(gè)dist文件夾，這里面就是打包過后生成的文件

② 在這里簡單解釋下打包后js和css文件自動(dòng)加了版本號(hào)的基本作用：可以進(jìn)行版本回退，唯一標(biāo)識(shí)。

③ 在這里我們 模擬 把打包好的文件夾交給后端，所以我將打包好的dist文件夾放到一個(gè)我創(chuàng)建好的文件夾nginx-root文件夾里面，并且放到my-app文件夾

你看，它就安靜的躺在這里，慈祥又安和

二、接下來就是我們后端服務(wù)器Nginx的操作

1.既然是教程，那就徹底手把手教學(xué)，第一步我們要先下載一個(gè)Nginx服務(wù)器，完全手把手，徹底手把手，不要九塊九，更不要九十九，別太感動(dòng)

① 去nginx.org下載一個(gè)Nginx，在右側(cè)找到download點(diǎn)進(jìn)去，在這里我們可以下載Stable version下面的 nginx/Windows-1.14.1 這個(gè)版本，

鏈接地址：http://nginx.org/en/download.html

②  然后將下載好的壓縮包解壓后放到你的本地磁盤里

③  給Nginx配置環(huán)境變量，相信大家應(yīng)該都知道怎么配環(huán)境變量把，不知道怎么配環(huán)境變量可以私聊我，在這里就不做過多解釋了，直接講解下一步操作

2.開始Nginx的配置

① 在你的 nginx(應(yīng)該是nginx-1.14.1)文件夾中 打開命令行，執(zhí)行命令： start nginx

//開啟nginx服務(wù)器，執(zhí)行完該命令后，如果你的命令控制工具閃了一下，并且光標(biāo)懸停一閃一閃放光芒，此時(shí)你就可以在你的瀏覽器上輸入localhost，按下回車，如果出現(xiàn)了Welcome to nginx！，恭喜你，你已經(jīng)成功開啟nginx服務(wù)器的封印了

② 在編譯器中，將你的 nginx文件夾下 找到 conf文件夾 ，然后進(jìn)入到 nginx.conf文件，找到server，將server和括號(hào)里面的內(nèi)容用#注釋掉(注釋的時(shí)候要小心，不能注釋多也不能注釋少，一定要精準(zhǔn)，精準(zhǔn)你懂吧)

③ 在conf文件夾下創(chuàng)建一個(gè) conf.d文件夾 (該名字隨意起)，在這里我們可以在conf.d文件夾下創(chuàng)建一個(gè) test.conf文件，在后期你可以創(chuàng)建多個(gè).conf文件，來配置你的多個(gè)項(xiàng)目的server

④  在nginx.conf文件中把這行代碼在http括號(hào)里面找個(gè)地方放下，include后面跟的是你conf.d文件夾的絕對(duì)路徑，這句代碼的意思就是匹配下面所有的conf文件，這是我的，你把后面的路徑改成你的就可以，注意要把斜杠改成反斜杠/

include D:/nginx-1.14.1/conf/conf.d/*.conf　　//這是我的，你把路徑改成你的conf.d的絕對(duì)路徑就可以，注意斜杠是'/'不是'\'

⑤ 在你的test.conf文件中添加配置信息，這是配置信息的解釋，大家可以根據(jù)我的配置信息demo來配置你的

server { 
  listen 80;   ------端口號(hào)
  server_name localhost;   ------域名
  root 你的dist文件夾的絕對(duì)路徑;   ------根    
  autoindex on;    ------將你匹配的文件自動(dòng)匹配到index.html
  expires 1s;     ------緩存(只是為了演示才寫的)
  charset utf-8;

  location /匹配路徑{ 
    proxy_pass 接口反向代理的目標(biāo)target;    ------在這里配置你的反向代理，若要配置多個(gè)代理路徑，將此代碼復(fù)制多個(gè)修改即可
  }   

  location / {
　　　　　　try_files $uri $uri/ /index.html;　　 ------這是從vue官網(wǎng)抄過來的配置，意義在于保證一旦我們的路由刷新的時(shí)候一旦后端找不到對(duì)應(yīng)的路由，將自動(dòng)跳轉(zhuǎn)到index.html文件
  }  
}

- 我貼出來一個(gè)配置信息demo，大家可以根據(jù)這個(gè)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.最后，準(zhǔn)備享受成功的喜悅

重啟Nginx服務(wù)器，瀏覽器訪問localhost:你的端口號(hào)，在這里我設(shè)置的是默認(rèn)值80，你的可以隨意，不過最好也設(shè)成80把，當(dāng)你按下回車的那一刻，你的項(xiàng)目已經(jīng)跑起來了，恭喜你，部署成功，現(xiàn)在，雙手離開鍵盤，摘下你的耳機(jī)，可以歡呼了?。?！

三、最后給大家做個(gè)小結(jié)，總結(jié)一下本地部署用到的一些命令

start nginx　　　　  //開啟nginx服務(wù)
nginx -s stop　　　　//關(guān)閉nginx服務(wù)，(你可以關(guān)閉服務(wù)再重新開啟服務(wù)來達(dá)到重啟nginx服務(wù)的效果)
yarn build　　　　　//打包vue項(xiàng)目到dist文件夾下

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論