（前言：文章記錄vue-cli項(xiàng)目打包使用IIS布署遇到的幾個(gè)錯(cuò)誤及解決方式）

?

首先簡單理解webpack打包：

個(gè)人理解：項(xiàng)目開發(fā)中我們構(gòu)建 "低耦合高內(nèi)聚" 的組件/模塊來代碼重用、降低項(xiàng)目復(fù)雜性，提升開發(fā)效率。而webpack?就是一個(gè)靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會通過遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，進(jìn)而將所有所有項(xiàng)目模塊打包成一個(gè)或多個(gè)?bundle.js文件（?bundle.js文件不能被瀏覽器識別，需要使用babel轉(zhuǎn)換器轉(zhuǎn)換成瀏覽器可識別的js文件），通過webpack打包后的主文件可以找到你項(xiàng)目當(dāng)中的所有依賴文件。

?

?

1、錯(cuò)誤：項(xiàng)目打包布署后一片空白

分析原因：打開打包文件 dist/index.html 可以看到，index.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，當(dāng)打包路徑配置錯(cuò)誤，打開就會是空白的。

解決方式：

修改打包build配置文件路徑，選擇打開 config/index.js文件，將build對象中的assetsPublicPath屬性值改為 ‘./ ’，目的是使打包后的項(xiàng)目index.html獲取到依賴文件，修改后如下圖：

?

注意事項(xiàng)：router/index.js路由配置里邊默認(rèn)模式是hash，如果改成了history模式的話，打開也會是一片空白。如果使用history模式的話，需要你在服務(wù)端加一個(gè)覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個(gè)index.html,這個(gè)頁面就是你app依賴頁面。

?

?

2、錯(cuò)誤：靜態(tài)資源文件404 NOT Founed

分析原因：項(xiàng)目中出現(xiàn)png、woff、tiff等文件404 NOT Founed，這里以找不到homr_bg.png文件為例分析，可以在項(xiàng)目cmd命令窗口看到打包記錄，也可以在dist/static/img 下看到打包文件

檢查css文件中對該圖片的引用路徑出現(xiàn)錯(cuò)誤如下圖，在服務(wù)器根目錄獲取不到static文件夾，所有文件夾下png 404錯(cuò)誤

?

解決方式：在build/utils文件中的下圖所示位置修改?publicPath:屬性值為 '../../'，如下圖，這樣打包的樣子就變成../../static的樣子了，就可以解決我們的問題。

?

?

?

3、錯(cuò)誤：refrenceError:promise未定義（部分瀏覽器不支持ES6語法）

項(xiàng)目布署過程中，chrome內(nèi)核瀏覽器下都能正常顯示頁面，在IE內(nèi)核瀏覽器下彈框提示 "refrenceError:promise未定義"

分析原因：低版本瀏覽器內(nèi)核版本太低，無法解析 ES2015最新的一些語法。babel是一個(gè)js轉(zhuǎn)譯器，Babel主要會轉(zhuǎn)換ES6和ES7語句為ES5語句。一般搭建項(xiàng)目時(shí)webpack會在最外層配置一個(gè).babelrc文件用于默認(rèn)解析ES2015（es6）中的特殊語法（例如： let，const，class等），而babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)碼。所以需要使用babel-polyfill

解決方式：安裝babel-polyfill

3.1、npm命令安裝：

npm install --save-dev babel-polyfill

3.2、在入口main.js文件引入：

import babel-polyfill

3.3、在build文件夾下找到webpack.base.conf.js.修改入口方式：

entry: {app: ["babel-polyfill", "./src/main.js"]},

3.4、再依賴一個(gè)插件解決ES6/ES7高級語法兼容:

npm install --save-dev babel-preset-es2015

?

參考鏈接：https://blog.csdn.net/webKris/article/details/83625673

總結(jié)

以上是生活随笔為你收集整理的vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。