這篇文章主要為大家展示了“Vuejs+vue-router打包+Nginx配置的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vuejs+vue-router打包+Nginx配置的示例分析”這篇文章吧。

10年的惠民網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整惠民建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“惠民網(wǎng)站設計”,“惠民網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

正文開始

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

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

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

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

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

然后

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

接下來在你的瀏覽器下訪問cloudserverhost:3000，就可以訪問到你的項目主頁了。

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

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

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

以上是“Vuejs+vue-router打包+Nginx配置的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：Vuejs+vue-router打包+Nginx配置的示例分析
轉(zhuǎn)載來于：http://aaarwkj.com/article2/pesgoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制開發(fā)、網(wǎng)站制作、電子商務、網(wǎng)站設計公司、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)