快捷導(dǎo)航

Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法

更新時(shí)間：2019年11月01日 09:22:25 作者：返回主頁(yè) 楊柳依

這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

0. Nginx使用

以windows版為例，下載niginx壓縮包并解壓到任意目錄，雙擊nginx.exe，在瀏覽器中訪問(wèn)http://localhost，如果出現(xiàn)Welcome to nginx!頁(yè)面則說(shuō)明成功。

nginx常用命令如下：

nginx -h  # 打開(kāi)幫助
nginx -t  # 檢查配置文件是否正確

# 以下命令均要先啟動(dòng)nginx才能執(zhí)行
nginx -s stop # 停止
nginx -s quit # 退出
nginx -s reopen # 重新啟動(dòng)（注意不會(huì)重新讀取配置文件）
nginx -s reload # 重新讀取配置文件

1. 部署項(xiàng)目到Nginx根目錄

對(duì)于vue-cli創(chuàng)建的項(xiàng)目，修改vue.config.js文件（位于項(xiàng)目根目錄下，沒(méi)有的話自行創(chuàng)建）：

module.exports = {
 // 開(kāi)發(fā)環(huán)境中使用的端口
 devServer: {
 port: 8001
 },
 // 取消生成map文件（map文件可以準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)）
 productionSourceMap: false,
 // 開(kāi)發(fā)環(huán)境和部署環(huán)境的路徑
 publicPath: process.env.NODE_ENV === 'production'
 ? '/'
 : '/my/',
 configureWebpack: (config) => {
 // 增加 iview-loader
 config.module.rules[0].use.push({
  loader: 'iview-loader',
  options: {
  prefix: false
  }
 })
 // 在命令行使用 vue inspect > o.js 可以檢查修改后的webpack配置文件
 }
}

在vue項(xiàng)目根目錄中使用命令npm run build創(chuàng)建輸出文件，將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/內(nèi)（沒(méi)有的話自行創(chuàng)建）。

修改nginx目錄中的conf/nginx.conf文件，在 http -> server 節(jié)點(diǎn)中，修改location節(jié)的內(nèi)容：

location / {
 root webapp;
 index index.html index.htm;
}

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過(guò)http://localhost訪問(wèn)項(xiàng)目。

2. 多個(gè)項(xiàng)目部署到Nginx

有時(shí)一個(gè)Nginx中放了好幾個(gè)子項(xiàng)目，需要將不同的項(xiàng)目通過(guò)不同的路徑來(lái)訪問(wèn)。

對(duì)于項(xiàng)目1而言，修改vue.config.js文件的publicPath：

publicPath: '/vue1/'

對(duì)于項(xiàng)目2而言，修改vue.config.js文件的publicPath：

publicPath: '/vue2/'

分別在vue項(xiàng)目根目錄中使用命令npm run build創(chuàng)建輸出文件，將dist文件夾下的所有內(nèi)容復(fù)制到nginx目錄下的webapp/vue1和webapp/vue2內(nèi)（沒(méi)有的話自行創(chuàng)建）。

修改nginx目錄中的conf/nginx.conf文件，在 http -> server 節(jié)點(diǎn)中，修改location節(jié)的內(nèi)容：

location /vue1 {
 root webapp;
 index index.html index.htm;
}

location /vue2 {
 root webapp;
 index index.html index.htm;
}

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過(guò)http://localhost/vue1、http://localhost/vue2訪問(wèn)項(xiàng)目1、項(xiàng)目2。

3. 端口代理

當(dāng)前后端項(xiàng)目分別部署在同一臺(tái)機(jī)器上時(shí)，由于無(wú)法使用相同的端口，故后端一般會(huì)將端口號(hào)設(shè)置成不同的值（例如8080），但是當(dāng)前端向后端請(qǐng)求資源時(shí)還要加上端口號(hào)，未免顯得麻煩，故利用可以nginx將前端的指定路徑代理到后端的8080端口上。

在conf/nginx.conf文件中增加location：

location /api {
 proxy_pass http://localhost:8080/api;
}

這樣，當(dāng)前端訪問(wèn)/api路徑時(shí)，實(shí)際上訪問(wèn)的是http://localhost:8080/api路徑。

總結(jié)

以上所述是小編給大家介紹的Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: