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

 使用webpack打包時報錯無法加載文件（按理說這個命令執(zhí)行后會生成bundle.js文件但是我生成的總是main.js，不過后期當我后面配置好webpack.config.js文件后就直接生成了：

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

可以打包但是關(guān)于mode報錯:

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

 這是vue處理圖片時的報錯：

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

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

limit<圖片大小：我們需要使用file-loader                                                                               

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

下面是webpack.config.js里的配置，添加屬性pubiclPath:'dist/'，幫助自動修改img打包路徑（因為index.html和打包文件不在同一級目錄，添加紅色部分即可我這里注釋掉了是因為后面做了配置，建議一開始還是一步步來）name屬性定義了file-loader處理圖片的命名方式，這樣圖片就會打包到dist/img目錄下面了。

配置webpack.config.js報錯：

解決方法：這個主要是webpack.config.js里的loader配置時的參數(shù)類型報錯，我這里vue-loader少加了中括號，碰到這個報錯建議對照官網(wǎng)配置檢查loader配置有沒有少符號。

最后在下載某個loader時就報錯，建議先查找與已安裝依賴相對應(yīng)的依賴再下載，因為各依賴之間的版本有限制而且有些版本的依賴也不再使用了。

總結(jié)

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

最新評論