Vue+webpack項目實踐踩坑之路 | 持續更新

一、git clone 與vue init 相愛相殺

首先，我在git上新建了一個項目 leke-operation。

而後，我在本地clone了這個項目 leke-operation。

接着，我在本地的這個項目（目前是一個空文件夾 leke-operation）執行命令 vue init webpack leke-operation

這會兒你會很fu*k的遇到vue初始化命名必須輸入項目名，

因而你的目錄成立 leke-operation 文件夾裏面又一個 leke-operation 文件夾。

 

嘗試換個思路，我先init好個人項目，生成了一個 leke-operation 文件夾。

而後，我去clone項目，結果又是clone了一個新的leke-operation文件夾出來，又是包了一層目錄。

接着去嘗試checkout commit push 等等，各類Bug...

不說這些失敗的嘗試了，最後的解決方案很簡單，簡單到以爲本身是個zz

 

方案以下：

首先，我在git上新建了一個項目 leke-operation。

而後，我在本地clone了這個項目 leke-operation。

接着，我在本地的這個項目（目前是一個空文件夾 leke-operation）的父級目錄中執行命令 vue init webpack leke-operation

這會兒你會很fu*k的遇到vue初始化命名必須輸入項目名，

因而你的目錄成立 leke-operation 文件夾裏面又一個 leke-operation 文件夾。

它會提示你當前項目名已存在同名文件夾是否覆蓋它，直接執行Yes!

最終如我所願。

 

二、別忘安裝less-loader

vue-cli 構建的項目默認是不支持 less 的，須要本身添加。

官網推薦的方法 npm install less 是不夠的

正確的操做以下：

npm install less less-loader --save-dev

 

三、VeeValidate配置中文的兩種不一樣作法

舊版： "vee-validate": "^2.0.0-rc.13"

新版："vee-validate": "^2.1.0-beta.7"

安裝最新版的VeeValidate以後對其進行中文化操做時，

以前老一套（2.0版）中文化的作法以下圖：

系統報錯提示 addLocale 是不存在的，因此這個時候，要麼將版本下降至2.0版，要麼就再安裝一個玩意兒：vue-i18n

執行命令 yarn add vue-i18n

此時，新一套（2.1版）中文化的作法以下圖：

 

四、axios修改請求數據格式

默認請求數據的格式是這樣的：

修改請求頭信息

headers: {  'Content-Type': 'application/x-www-form-urlencoded'  }

修改請求數據

transformRequest: [function (data, headers) {
    let ret = ''
    for (let it in data) {
        if (data[it] === 0 || (data[it] || data[it] === '') || data[it] === false) {
            if (ret !== '') ret += '&'
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
        }
    }
    return ret
}]

關於axios的具體代碼配置以下：

const instance = axios.create({
    // 設置超時時間
    timeout: 30000,
    // 請求的baseUrl
    baseURL: baseUrl,
    // 請求頭部信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    // 修改請求數據
    transformRequest: [function (data, headers) {
        let ret = ''
        for (let it in data) {
            if (data[it] === 0 || (data[it] || data[it] === '') || data[it] === false) {
                if (ret !== '') ret += '&'
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
            }
        }
        return ret
    }],
    // 跨域請求時容許攜帶憑證（cookie）
    withCredentials: true
})

 

五、沒了dev-server.js文件如何模擬後臺數據

以前的package.json中默認配置以下：

而最新腳手架搭建的項目配置以下：

因而可知，項目的開發環境啓動已經再也不依賴dev-server.js這個多餘的一步，而是直接在webpack.dev.conf.js運行，

此時若是咱們須要配置express來模擬請求返回數據的話，作法以下：

（1）安裝express：

npm install express --save

（2）在webpack.dev.conf.js文件中，頭部引入：

（3）找到devServer，添加模擬數據：

 

六、vue-cli webpack打包後加載資源的路徑問題

打包後的index.html加載資源失敗 > 提示報路徑錯誤 > 須要咱們對build操做進行一些path上的調整！

具體以下：

一、靜態資源的絕對路徑改成相對路徑

二、添加圖片資源的訪問路徑

OK，就這兩步差很少了。