珂朵莉程序員

1. 用vue框架做項目遇到的問題(vue項目常見問題)

在搞清root，alias，try_files的基本用法後，我開始嘗試vue項目的部署。

（用法我之前的文章也研究過）

此前，聽說挺多小夥伴會遇到vue-router-history模式種種問題，比如路徑無法匹配，找不到靜態資源，刷新頁面404，etc...

不急，只要找到原因，問題是可以迎刃而解的。

項目部署環境一般可以分為三種：生產環境，測試環境，開發環境。

開發環境：開發環境時程序員專門用於開發的伺服器，配置可以比較隨意，為了開發調試方便，一般打開全部錯誤報告和測試工具，是最基礎的環境。

生產環境：生產環境是指正式提供對外服務的，一般會關掉錯誤報告，打開錯誤日誌，是最重要的環境。部署分支一般為master分支。

測試環境：一般是克隆一份生產環境的配置，一個程序在測試環境工作不正常，那麼肯定不能把它發布到生產伺服器，是開發環境到生產環境的過渡環境。

測試環境的分支存在bug，一般不會讓用戶和其他人看到，並且測試環境會盡量與生產環境相似。

如何區分生產環境和開發環境？

process.env.NODE_ENV是node的全局變數process的一個屬性，它的作用是區分當前環境是生產環境還是開發環境，

可以參考學習：理解webpack中的process.env.NODE_ENV

其實一般的vue單頁面應用項目中，遇到路徑無法匹配，或者資源引用錯誤問題都是由於以下幾個屬性造成的，如果你經常翻官網文檔，那看到這里應該就已經會意，他們分別是：

接下來我將講解以下這幾個屬性的使用。

依照官網的解釋，貼一張用法圖：

當使用基於HTML5history.pushState的路由時，「相對publicPath」會受到限制，即是說在使用history模式時，publicPath需要設置為絕對路徑。那麼在vue.config.js文件中，你應該這樣配置：

在nginx配置文件中你就需要這樣配置：

假設我的項目名為history，並且放在/usr/local/webserver/nginx/myProject目錄下，如tree圖

示例貼一下：珂朵莉的伺服器(點擊about會使用路由跳轉)

如果你的配置出現頁面空白，或者404訪問錯誤，資源引用問題（F12可觀察），這時你就要檢查publicPath，assetsDir甚至是nginx有沒有配置正確了。

我覺得原因是頁面刷新時，伺服器找不到任何的靜態資源，就報404，那麼解決辦法就簡單了：你要在服務端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回同一個index.html頁面，這個頁面就是你app依賴的頁面。即使用try_files尋找index.html。

可以參考本項目的nginx配置：

但如此配置後，你的伺服器就不再返回404錯誤頁面，因為對於所有路徑都會返回index.html文件。為了避免這種情況，你應該在Vue應用裡面覆蓋所有的路由情況，然後在給出一個404頁面。

參考官網例子：

另一方面,有可能是Vue-Router沒有配置好，需要注意初始化Router時候的base參數:

如此項目部署就完成了。

感謝博哥指出之前文章錯誤之處，已經修正，謝謝

在Vue開發當中經常會遇到各種各樣的介面問題,最近在項目中遇到開發和線上環境介面路徑不一樣的問題,網上找到很多博客,大多都是千篇一律的復制粘貼,對於新手來說可能比較難以理解,所以我寫這篇博客分享給剛使用vue做項目的小萌新同學一個詳細的介面配置思路。

webpack提供了生產環境和線上環境的兩種配置文件,平時開發當中使用一個介面,項目上線後就會自動切換成另外一個介面,廢話不多說,下面上圖。首先是找到vue-cli項目中config文件夾下的dev.env.js,默認是下面的樣子:

然後我們需要添加開發環境中使用的請求後台數據的介面域名,如下圖:

url_api是我自己設置的,可以自定義。後面的路徑就是你自己開發環境中的介面。

接著找到prod.env.js,默認如下圖:

在這個文件中同樣添加線上請求介面的配置:

最後在自己封裝的axios中去調用這個介面:

自定義變數=process.env.url_api(這個就是剛才在config兩個文件中自定義的),拼接url到封裝的axios中。最後在生產環境中npmrundev的時候會自動調用剛才在dev.env.js中定義的介面,當使用npmrunbuild去打包的時候會自動調用prod.env.js中配置的介面。

另外:跨域的問題

???可能有些小夥伴在vue中配置了跨域的代理,所以導致拼接url中proxy代理失效,依然出現跨域的問題,解決這個問題我的個人思路是代理配置不變,只需要在dev.env.js中用空字元串替換本地介面。就不會出現開發環境中跨域的問題了。有不明白的可以問我,有更好的方案也希望能不吝賜教,謝謝。

鏈接：

初學vue問題記錄

問題一、vue-router使用過程遇到的登錄頁空白問題

之前用vue-cli創建了一個vue項目，默認使用vue-router，目錄結構中自帶了router目錄，裡面有index.js

但是當我又創建一個項目的時候默認沒有使用vue-router時，後面我使用npminstallvue-router安裝了插件之後項目中沒有自動創建router目錄。查找資料顯示說這種方式不會創建router目錄，自己就把前面創建的項目的router目錄及裡面的文件拷貝過來使用。

使用的過程中，新建立的項目我自己單獨寫了一個Login.vue，想把這個登錄頁面作為首頁，使用vue-router配置。我就修改了router目錄的index.js。如下：

main.js中引入router.js。如下：

到這里就是我找到的資料要配置登錄頁的，加上我不使用router-link，我就沒有修改App.vue。我以為都配置完成了，就直接啟動項目，發現頁面空白。後來才發現App.vue中沒有使用router-view/router-view。在App.vue加入router-view/router-view啟動就成功顯示登錄頁面了。

總結：使用vue-router，

1.需要在router目錄的index.js維護好路由

2.main.js中引入router下文件

3.App.vue中使用router-view

最後還發現了一個問題，用訪問title上的favicon沒有顯示；

用訪問title上的favicon就能顯示

通過測試發現，好像是瀏覽器緩存問題，清除瀏覽器緩存又可以正常顯示了。

問題二、使用vue-router過程中，子路由不顯示問題

問題描述，我的項目是一個登錄頁面，項目默認顯示登錄頁面；登錄成功後顯示登錄成功後的默認頁面，我的默認頁面是由header公共導航和內容組件組成，這個時候出現了問題，header部分組件顯示正常，但是內容組件不顯示。經過分析查閱資料是因為父路由組件沒有使用router-view導致的。我的header組件是由兩個組件組成的，就在header組件內加上router-view登錄成功後的默認頁面就顯示正常了。

HeadLayout.vue中增加router-view，解決子路由不顯示問題

總結：要使用路由一定要在使用router-view，要在父級組件中使用。

問題三、子路由跳轉問題

問題描述：原本MainMenu.vue中使用的是a鏈接，我添加的click方法進行路由切換，但是總是失敗，切換後一閃第二個頁面的內容，然後又顯示第一個頁面內容。寫法如下：

第二個子路由頁面內容閃一下

最終顯示第一個子路由頁面內容

這個a鏈接click的問題原因出現在href上，我只是清空了裡面的內容，需要刪除該屬性，或者將值改為href="javascript:;"，

解析參照：

自己換成router-link實現路由切換，可以正常切換。另外要在router-link上使用click方法切換路由，而不使用to屬性，需要使用native修飾符。@clike.native

但是還有一個問題就是我加了一個樣式，給router-link，想讓激活的link帶背景色。我這種寫法兩個都有這個樣式

.router-link-active{

background:#848484;

}

效果如下：

於是我又棄用click了，直接使用to屬性才沒有問題。

1從瀏覽器中了解這個應用的呈現結果，對整個應用具有的大功能模塊有個大致了解，比如包含歡迎頁、用戶管理、業務數據查詢等；

2學習了解Vue項目的默認目錄結構及載入流程，比如文件index.html、package.json、main.js，目錄/build、/config、/src等。

參考鏈接：

優雅的Vue項目目錄結構設計

VUE啟動流程

涉及state對象使用的，大部分是需要先引入vuex，而vuex對象的定義及處理文件，都默認存放在工程的/src/store目錄下，到該目錄下的相應文件中可找到其他文件依賴的變數數據。

參考鏈接：

Vuex是什麼？

import語法是很多其他語言中都有的關鍵詞，較易理解，但export是干什麼用的，exportdefault和export又有什麼區別，其他文件是如何使用export出去的變數的？

參考鏈接：

exportdefault和export區別

工程中經常見到v-auth指令，從字面意思上可以理解為許可權的驗證，但在網上搜不到該指令的含義和用法，後才得知為本應用的自定義指令，並有專門針對該指令進行定義的函數。

參考鏈接：

自定義指令

剛對Vue的組件概念有些了解時，會把所有的元素標簽都認為是Vue自定義組件的一部分，然後開始到工程中去找該組件的定義，其實還有很多是官方組件，比如el-popover、el-table、el-table-column等，到相應的官網上找標簽的定義和用法即可。

參考鏈接：

ElementUI教程

1默認用的intellijidea作為Vue工程的開發IDE，在該IDE中啟動Vue工程，需要安裝nodejs，並在IDE中配置RunConfigurations，詳細配置見下面的參考鏈接；

2配置好運行參數之後，在啟動過程中報錯：Error:listenEACCES:permissiondenied0.0.0.0:80，該錯誤的原因為本地80埠被佔用，通過關閉80埠佔用進程或修改配置文件中的埠號即可正常啟動。

參考鏈接：

idea運行vue項目

用idea在本地調試時，只要運行npmrundev即可，但若將分支部署到伺服器上，則需先在本地運行npmrunbuild進行編譯，然後將編譯完的文件上傳至git，這樣用自動化集成工具進行集成時，才可從git中拉取解析後的文件並正常被web服務讀取（該操作與java工程在git中只保存源碼不同）。