Vue2.0中如何將項(xiàng)目上線-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue2.0中如何將項(xiàng)目上線，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國(guó)電信/網(wǎng)通/移動(dòng)機(jī)房，成都二樞機(jī)房服務(wù)有保障！

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ò)誤寫法：

以上是“Vue2.0中如何將項(xiàng)目上線”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：Vue2.0中如何將項(xiàng)目上線-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article38/dpgdsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)