Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
當(dāng)你好不容易的做好了一個(gè)Vue項(xiàng)目，準(zhǔn)備去上線的時(shí)候卻發(fā)現(xiàn)不知道該怎么辦時(shí)，或者遇到了一些問題，那么來看我這篇文章吧，你會(huì)有所收獲的。
1：打包
項(xiàng)目上線必須要打包。
命令： npm run build
打包后會(huì)生成 一個(gè) dist 文件夾，里邊有 index.html文件 和 static文件夾
打包命令截圖如下：
生成文件如下：
現(xiàn)在我們已經(jīng)打包好了，那么現(xiàn)在讓我們打開這個(gè)項(xiàng)目吧。
雙擊 index.html 打開
你會(huì)看到 一堆的報(bào)錯(cuò)，慌不？別著急接著看。通過上圖我們可以看到報(bào)錯(cuò)的原因是資源路徑不對(duì)，這時(shí)我們需要去修改一些文件了。
在這里 把資源的路徑 由 '/' 改為 './',因?yàn)?'./' 是當(dāng)前目錄下的意思，
沒用之前 index.html 里的引入文件是這樣的：
這個(gè)路徑它是找不到的，所以報(bào)錯(cuò)了。
改完后 是這樣的：
此時(shí) 路徑就對(duì)了，再雙擊打開就可以了
這時(shí)就沒有報(bào)錯(cuò)了，正常打開。
2：?jiǎn)?dòng)項(xiàng)目。（運(yùn)行 index.html）
你可以雙擊 打開，也可以用 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ì)的問題
當(dāng)我在 vue 的 css 里寫了一個(gè)背景圖片，但是 npm run build 后就不太好使了。
截圖如下：可以看到，在 npm run dev 時(shí) 是好的
但是 當(dāng)我 打包 并且使用 anywhere 啟動(dòng)后
卻報(bào)錯(cuò)了，它告訴我 資源的路徑不對(duì)，仔細(xì)一看我沒這個(gè)路徑呀，我項(xiàng)目也沒隨便改配置呀，是不是又要拍腦門了，別急，跟我一起來改個(gè)配置。
打開 我們的 build 文件夾，找到里邊的 utils.js 文件，找到第 51 行（目測(cè)是的），添加 這個(gè) 代碼 publicPath: '../../' ，然后重新打包 就可以了，這時(shí)資源路徑就對(duì)了。
更改如下：
效果如下：
我們用審查元素來看一下： 這次它 就正確的找到了 資源的路徑，加載出來了資源。
錯(cuò)誤寫法：
現(xiàn)在知道怎么去解決這個(gè)問題了的吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之文件加載執(zhí)行全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了Vue之監(jiān)聽數(shù)據(jù)的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺(tái)接口實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue左側(cè)底部彈出菜單功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue下的@change事件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue.js實(shí)現(xiàn)動(dòng)態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)動(dòng)態(tài)面包屑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式
這篇文章主要介紹了Vue中修改Mint UI的Toast默認(rèn)樣式之字體大小調(diào)整方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue 中的 render 函數(shù)作用，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02