Vue打包注意事項(xiàng)

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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