Vue2.0學習系列之項目上線的方法步驟(圖文)

當你好不容易的做好了一個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: '../../' ，然后重新打包 就可以了，這時資源路徑就對了。

更改如下：

效果如下：

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

錯誤寫法：

現在知道怎么去解決這個問題了的吧。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com