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

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

1：打包

項目上線必須要打包。

命令： npm run build

打包后會生成 一個 dist 文件夾，里邊有 index.html文件 和 static文件夾

打包命令截圖如下：

生成文件如下：

現(xiàn)在我們已經(jīng)打包好了，那么現(xiàn)在讓我們打開這個項目吧。

雙擊 index.html 打開

你會看到 一堆的報錯，慌不？別著急接著看。通過上圖我們可以看到報錯的原因是資源路徑不對，這時我們需要去修改一些文件了。

在這里 把資源的路徑 由 '/' 改為 './',因為 './' 是當前目錄下的意思，

沒用之前 index.html 里的引入文件是這樣的：

這個路徑它是找不到的，所以報錯了。

改完后 是這樣的：

此時 路徑就對了，再雙擊打開就可以了

這時就沒有報錯了，正常打開。

2：啟動項目。（運行 index.html）

你可以雙擊 打開，也可以用 node 的 anywhere 啟動一個靜態(tài)文件服務器。在 npm 官網(wǎng)搜索就可以找到了，然后安裝。

cd 到我們的 dist 文件夾中，然后 anwhere 就可以啟動了。

然后我們的打包工作就做完了，可以把我們的整個 dist 文件 給到后端，或者運維讓他們上線。

3：解決一些錯誤

第一個： 靜態(tài)資源路徑不對的問題

當我在 vue 的 css 里寫了一個背景圖片，但是 npm run build 后就不太好使了。

截圖如下：可以看到，在 npm run dev 時 是好的

但是 當我 打包 并且使用 anywhere 啟動后

卻報錯了，它告訴我 資源的路徑不對，仔細一看我沒這個路徑呀，我項目也沒隨便改配置呀，是不是又要拍腦門了，別急，跟我一起來改個配置。

打開 我們的 build 文件夾，找到里邊的 utils.js 文件，找到第 51 行（目測是的），添加 這個 代碼 publicPath: '../../' ，然后重新打包 就可以了，這時資源路徑就對了。

更改如下：

效果如下：

我們用審查元素來看一下： 這次它 就正確的找到了 資源的路徑，加載出來了資源。

錯誤寫法：

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

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

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

廣告

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