Vue打包注意事項

felix0913 發布于2019-08-23 13:00 / 2316人閱讀

摘要：在使用進行項目打包時，發現了一些以前沒注意到的點，因此寫下此文，記錄一下，如果可以對大家有所幫助，那就更好了。原因中默認打包后創建文件，以提醒開發人員錯誤位置。解決方式圖片描述打開項目根目錄下的文件，找到將這個參數改為即可。

在使用vue-cli進行項目打包時，發現了一些以前沒注意到的點，因此寫下此文，記錄一下，如果可以對大家有所幫助，那就更好了。
1.直接使用npm run build 打包時，會出現一些以.map結尾的文件

.map文件的作用：由于打包后代碼會進行加密，這時如果運行錯誤，輸出的錯誤信息無法準確得知是哪里的代碼報錯，而有了這些.map文件當代碼出現錯誤時，可以像未加密時一樣，準確的輸出錯誤在那個位置。
原因：vue-cli中默認打包后創建.map文件，以提醒開發人員錯誤位置。
解決方式：
    ![圖片描述][1]
    打開項目根目錄下的/config/index.js文件，找到 productionSourceMap: true, 將這個參數改為false即可。
建議：
    一般情況下，項目都是經過測試完之后才上線，代碼基本上不會有什么問題，所以這時報錯提示基本上沒有什么用，反而會占一定的體積，因此可以將它刪除。

2.打包之后出現頁面渲染不出來的情況

 原因：打開控制臺后看見報錯信息顯示是路徑找不到，原因是vue-cli打包默認情況下使用的是絕對路徑，將其打包后的路徑改為相對路徑即可
 解決方式：
     ![圖片描述][2]
     打開項目根目錄下的/config/index.js文件，找到 assetsPublicPath: "/"這個參數，將其修改為  "./"即可。

3.在代碼中引入圖片時，使用相對路徑，這樣可以避免出現打包后圖片出不來的情況。

以上就是我在進行Vue打包時的一些收獲，如果大家覺得有哪些不足之處，可以指出，我一定將其改正。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99148.html

Webpack + Vue 多頁面項目升級 Webpack 4 以及打包優化

摘要：想要使用階段的語法需要單獨引用對應的，上面的配置只加了幾個處于階段的，老項目建議使用升級，自動添加依賴添加配置文件按需引入增加配置其他問題下面是我公司項目中遇到的問題，各位升級過程中如果遇到同樣的問題可以參考一下解決思路。 0. 前言早在 2016 年我就發布過一篇關于在多頁面下使用 Webpack + Vue 的配置的文章，當時也是我在做自己一個個人項目時遇到的配置問題，想到別人也...

Anchorer 2019-08-23 14:24 評論0 收藏0
【easy-invoices】electron-vue、sqlite3 項目初探

摘要：遠程讀取會有許多限制，防止引起不必要的安全隱患。比較時可以把點去掉轉為數字類型比較腳本執行完畢下載前可以拿到更新日志時間版本號和包大小，下載時可以拿到速度。然后開啟該項目的構建。將第一步生成的填至項目環境變量，參數名為。父母都是做出納相關的工作，希望我能給他們做個簡單的進銷存，在上班的時候使用。開發一個不需要花錢買服務器，不需要依賴網絡（更新除外），單機版的程序，對于前端出身的我來說...

wpw 2019-08-23 12:36 評論0 收藏0
實現element-ui的按需引入，按需打包加載

摘要：簡單說明原理使用實現按需引入打包。這里采用多入口配置，實現各個功能模塊分別打包成一個文件，并使用將樣式進行抽離后，按入口進行打包為對應的文件。只要在指定入口名為。這個相關配置已經發布了包。簡單說明原理：使用babel-plugin-component實現按需引入、打包。將webpack配置成多入口，保證最終打包的目錄結構符合babel-plugin-component插件的要求，實...

TesterHome 2019-08-23 10:41 評論0 收藏0
靈活使用vue單文件組件之--最少配置打包.vue組件

摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據上面的說明，不難想到還應該需要一個可以用來識別并轉換文件，一句話，就是把按下面格式的編寫的組件轉換為模塊。對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main...

forrest23 2019-08-02 16:00 評論0 收藏0
靈活使用vue單文件組件之--最少配置打包.vue組件

摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據上面的說明，不難想到還應該需要一個可以用來識別并轉換文件，一句話，就是把按下面格式的編寫的組件轉換為模塊。對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結構，進行.vue單文件組件的編寫，使用 npm run build命令會從main...

izhuhaodev 2019-08-22 11:16 評論0 收藏0