其實(shí)這個(gè)網(wǎng)上已經(jīng)有了很多人寫(xiě)了，為什么我還要再寫(xiě)這一篇博客？因?yàn)槲矣H身把他們生產(chǎn)的坑給踩了個(gè)通透（攤手。

正文開(kāi)始

本次的項(xiàng)目是基于vue-cli生成的項(xiàng)目，采用的vue-router的history模式。到這里相信大部人還是類似了，接下來(lái)就是一個(gè)坑死人不償命的網(wǎng)上諸多博客都在采用的巨坑。

在進(jìn)行打包的時(shí)候，很多博客里都寫(xiě)了，將/config/index.js下，build中的assetsPublicPath從/改為./。我很后悔，為什么當(dāng)初這樣照做的時(shí)候不去思考為什么，為什么要這樣做，憑什么？如果這個(gè)有問(wèn)題為什么webpack生成的時(shí)候不改反而一直放在那里？是誰(shuí)傻？問(wèn)題先放在這里，我們先按照那些教程走。修改完后npm run build，這樣在你的項(xiàng)目下就生成了一個(gè)dist文件夾，里面就是生成的靜態(tài)內(nèi)容。假設(shè)現(xiàn)在你的dist文件夾已經(jīng)在你的云服務(wù)器中了。接下來(lái)開(kāi)始nginx的配置。

個(gè)人采用的是sudo apt-get install nginx安裝的nginx，現(xiàn)在在命令行下，

cd /etc/nginx/conf.d/, 并在該目錄下 sudo touch vueSite.conf，接下來(lái)修改該文件內(nèi)容。

server {
 listen 3000; # 假設(shè)你項(xiàng)目監(jiān)聽(tīng)的是3000端口
 root /path/to/dist;
 location / {
  try_files $uri $uri/ /index.html;
 }
}

然后

sudo nginx -t檢查正確性，無(wú)誤后sudo nginx -s reload。

接下來(lái)在你的瀏覽器下訪問(wèn)cloudserverhost:3000，就可以訪問(wèn)到你的項(xiàng)目主頁(yè)了。

目前來(lái)看似乎是一切順利呢，網(wǎng)上的教程真棒棒哦~

然后你可以試試，在cloudserverhost:3000/path/subpath下刷新試試，你會(huì)發(fā)現(xiàn)，頁(yè)面沒(méi)有了，瀏覽器器里會(huì)報(bào)錯(cuò)，你會(huì)發(fā)現(xiàn)請(qǐng)求的js/css等都變成了html頁(yè)面的內(nèi)容。這個(gè)問(wèn)題就是出在了./下，我不知道第一個(gè)這樣寫(xiě)出來(lái)的人他的項(xiàng)目是不是很幸運(yùn)的只有一級(jí)路徑，又或者他從來(lái)不會(huì)嘗試去刷新頁(yè)面，否則這個(gè)問(wèn)題是無(wú)可避免的，為什么呢？./是相對(duì)路徑，/則是絕對(duì)路徑，當(dāng)你在二級(jí)路徑下刷新重新請(qǐng)求資源，你的請(qǐng)求路徑是什么？把請(qǐng)求路徑寫(xiě)出來(lái)我們就會(huì)發(fā)現(xiàn)問(wèn)題出在哪里了。很難過(guò)，我寫(xiě)這篇博客只用不到10分鐘，找到這個(gè)問(wèn)題卻用了差不多10小時(shí)，查了各種方法，我真是萬(wàn)萬(wàn)沒(méi)想到。

因此，正式上線的項(xiàng)目，沒(méi)有必要修改/config/index.js下，build中的assetsPublicPath。配置好nginx，你的項(xiàng)目就可以開(kāi)始起飛了！

以上這篇Vuejs+vue-router打包+Nginx配置的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論