當(dāng)你好不容易的做好了一個(gè)Vue項(xiàng)目，準(zhǔn)備去上線的時(shí)候卻發(fā)現(xiàn)不知道該怎么辦時(shí)，或者遇到了一些問題，那么來(lái)看我這篇文章吧，你會(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)目也沒隨便改配置呀，是不是又要拍腦門了，別急，跟我一起來(lái)改個(gè)配置。

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

更改如下：

效果如下：

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

錯(cuò)誤寫法：

現(xiàn)在知道怎么去解決這個(gè)問題了的吧。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論