我的目錄層級(jí)：工作文件夾為webpackedit，我這里只做簡(jiǎn)單依賴打包處理，src目錄下的main.js引入mathUtil.js文件，將內(nèi)容展示在index.html界面上，打包main.js后文件為dist目錄下的main.js文件：

 使用webpack打包時(shí)報(bào)錯(cuò)無(wú)法加載文件（按理說(shuō)這個(gè)命令執(zhí)行后會(huì)生成bundle.js文件但是我生成的總是main.js，不過(guò)后期當(dāng)我后面配置好webpack.config.js文件后就直接生成了：

 解決方法：使用管理員打開(kāi)wenstrom在工作目錄終端依次輸入以下命令即可

可以打包但是關(guān)于mode報(bào)錯(cuò):

 解決方法：這個(gè)mode是提示我們選擇開(kāi)發(fā)(development)或者生產(chǎn)模式(production)的打包方式，為了便于閱讀打包文件的內(nèi)容我這里使用了開(kāi)發(fā)模式打包方式，當(dāng)我們打包文件的時(shí)使用命令 ：入口文件路徑（也就是你要打包的文件） -o  打包文件路徑  --mode-devlopmen

 這是vue處理圖片時(shí)的報(bào)錯(cuò)：

解決方案： 這個(gè)報(bào)錯(cuò)涉及vue的圖片展示，需要url-loader和file-loader兩個(gè)依賴,當(dāng)我們下載好loader進(jìn)行配置時(shí)（vue官網(wǎng)有各種loader的具體配置過(guò)程）會(huì)發(fā)現(xiàn)url-loader里面會(huì)有一個(gè)limit屬性，它的大小限制了我們引入圖片的大?。?/p>

limit>圖片大?。捍藭r(shí)圖片會(huì)轉(zhuǎn)化成一個(gè)base64字符串引入html; 

limit<圖片大?。何覀冃枰褂胒ile-loader                                                                               

• 1)把圖片換成小圖;
• 2)把limit設(shè)置大一點(diǎn)(但是太大會(huì)影響圖片加載的效率）;
• 3）建議下載file-loader。

下面是webpack.config.js里的配置，添加屬性pubiclPath:'dist/'，幫助自動(dòng)修改img打包路徑（因?yàn)閕ndex.html和打包文件不在同一級(jí)目錄，添加紅色部分即可我這里注釋掉了是因?yàn)楹竺孀隽伺渲茫ㄗh一開(kāi)始還是一步步來(lái)）name屬性定義了file-loader處理圖片的命名方式，這樣圖片就會(huì)打包到dist/img目錄下面了。

配置webpack.config.js報(bào)錯(cuò)：

解決方法：這個(gè)主要是webpack.config.js里的loader配置時(shí)的參數(shù)類(lèi)型報(bào)錯(cuò)，我這里vue-loader少加了中括號(hào)，碰到這個(gè)報(bào)錯(cuò)建議對(duì)照官網(wǎng)配置檢查loader配置有沒(méi)有少符號(hào)。

最后在下載某個(gè)loader時(shí)就報(bào)錯(cuò)，建議先查找與已安裝依賴相對(duì)應(yīng)的依賴再下載，因?yàn)楦饕蕾囍g的版本有限制而且有些版本的依賴也不再使用了。

總結(jié)

到此這篇關(guān)于第一次使用webstrom簡(jiǎn)單創(chuàng)建vue項(xiàng)目的一些報(bào)錯(cuò)實(shí)戰(zhàn)記錄的文章就介紹到這了,更多相關(guān)webstrom創(chuàng)建vue項(xiàng)目報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！