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