資訊專欄INFORMATION COLUMN
摘要：當(dāng)你好不容易的做好了一個(gè)項(xiàng)目，準(zhǔn)備去上線的時(shí)候卻發(fā)現(xiàn)不知道該怎么辦時(shí)，或者遇到了一些問(wèn)題，那么來(lái)看我這篇文章吧，你會(huì)有所收獲的。打包項(xiàng)目上線必須要打包。然后我們的打包工作就做完了，可以把我們的整個(gè)文件給到后端，或者運(yùn)維讓他們上線。
當(dāng)你好不容易的做好了一個(gè)Vue項(xiàng)目，準(zhǔn)備去上線的時(shí)候卻發(fā)現(xiàn)不知道該怎么辦時(shí)，或者遇到了一些問(wèn)題，那么來(lái)看我這篇文章吧，你會(huì)有所收獲的。
1：打包
項(xiàng)目上線必須要打包。
命令： npm run build
打包后會(huì)生成 一個(gè) dist 文件夾，里邊有 index.html文件 和 static文件夾
打包命令截圖如下：
生成文件如下：
現(xiàn)在我們已經(jīng)打包好了，那么現(xiàn)在讓我們打開(kāi)這個(gè)項(xiàng)目吧。
雙擊 index.html 打開(kāi)
你會(huì)看到 一堆的報(bào)錯(cuò)，慌不？別著急接著看。通過(guò)上圖我們可以看到報(bào)錯(cuò)的原因是資源路徑不對(duì)，這時(shí)我們需要去修改一些文件了。
在這里 把資源的路徑 由 "/" 改為 "./",因?yàn)?"./" 是當(dāng)前目錄下的意思，
沒(méi)用之前 index.html 里的引入文件是這樣的：
這個(gè)路徑它是找不到的，所以報(bào)錯(cuò)了。
改完后 是這樣的：
此時(shí) 路徑就對(duì)了，再雙擊打開(kāi)就可以了
這時(shí)就沒(méi)有報(bào)錯(cuò)了，正常打開(kāi)。
2：?jiǎn)?dòng)項(xiàng)目。（運(yùn)行 index.html）
你可以雙擊 打開(kāi)，也可以用 node 的 anywhere 啟動(dòng)一個(gè)靜態(tài)文件服務(wù)器。在 npm 官網(wǎng)搜索就可以找到了，然后安裝。
cd 到我們的 dist 文件夾中，然后 anwhere 就可以啟動(dòng)了。
然后我們的打包工作就做完了，可以把我們的整個(gè) dist 文件 給到后端，或者運(yùn)維讓他們上線。
3：解決一些錯(cuò)誤
第一個(gè)： 靜態(tài)資源路徑不對(duì)的問(wèn)題
當(dāng)我在 vue 的 css 里寫(xiě)了一個(gè)背景圖片，但是 npm run build 后就不太好使了。
截圖如下：可以看到，在 npm run dev 時(shí) 是好的
但是 當(dāng)我 打包 并且使用 anywhere 啟動(dòng)后
卻報(bào)錯(cuò)了，它告訴我 資源的路徑不對(duì)，仔細(xì)一看我沒(méi)這個(gè)路徑呀，我項(xiàng)目也沒(méi)隨便改配置呀，是不是又要拍腦門了，別急，跟我一起來(lái)改個(gè)配置。
打開(kāi) 我們的 build 文件夾，找到里邊的 utils.js 文件，找到第 51 行（目測(cè)是的），添加 這個(gè) 代碼 publicPath: "../../" ，然后重新打包 就可以了，這時(shí)資源路徑就對(duì)了。
更改如下：
效果如下：
我們用審查元素來(lái)看一下： 這次它 就正確的找到了 資源的路徑，加載出來(lái)了資源。
錯(cuò)誤寫(xiě)法：
現(xiàn)在知道怎么去解決這個(gè)問(wèn)題了的吧。
好了，本篇博客要到這里結(jié)束了。
。。。結(jié)束
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108550.html
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 1965·2023-04-25 19:51
閱讀 1266·2021-11-15 11:43
閱讀 4679·2021-11-02 14:40
閱讀 2096·2021-10-11 10:59
閱讀 1428·2021-09-22 15:05
閱讀 1142·2021-09-09 09:32
閱讀 750·2019-08-30 15:56
閱讀 639·2019-08-30 15:52
