Vue打包注意事項

felix0913 發(fā)布于2019-08-23 13:00 / 2318人閱讀

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

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

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

2.打包之后出現(xiàn)頁面渲染不出來的情況

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

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

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

GPU云服務(wù)器云服務(wù)器 Vue_Vue 的注意事項快照注意事項機柜托管注意事項

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99148.html

相關(guān)文章

Webpack + Vue 多頁面項目升級 Webpack 4 以及打包優(yōu)化

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

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

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

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

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

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

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

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

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

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