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