因?yàn)樵诒救藢?shí)際開(kāi)發(fā)過(guò)程中，遇到過(guò)這樣的問(wèn)題——部署到生產(chǎn)環(huán)境中的頁(yè)面樣式和本地開(kāi)發(fā)環(huán)境中的樣式差異巨大，

所以需要通過(guò)npm run build打包后，直接在本地查看效果，以便于及時(shí)將這些樣式?jīng)_突類(lèi)的問(wèn)題解決掉：

1.在編輯器終端輸入npm run build:

　　項(xiàng)目文件夾下會(huì)生成一個(gè)dist文件夾，如下圖，里面有一個(gè)index.html文件

? ? ? ?

　　但是，直接雙擊打開(kāi)index.html的話，我們會(huì)發(fā)現(xiàn)頁(yè)面上一片空白，什么都沒(méi)有。

　　所以我們還需要進(jìn)行下面的步驟：

2.在項(xiàng)目文件中，找到config文件夾里的index.js文件，然后修改該文件中的build對(duì)象：

　　

　　將assetsPublicPath中的“/”，改為“./”。

　　

　　進(jìn)行完這個(gè)步驟后，再次npm run build

　　然后再打開(kāi)dist目錄下的index.html

　　這時(shí)候你也許能成功看到頁(yè)面上的內(nèi)容了，也許會(huì)發(fā)現(xiàn)頁(yè)面還是一片空白，

　　如果是后者，你可以試著進(jìn)行步驟3：

3.找到router文件夾下的index.js：

　　將mode: "history"注釋掉（即路由配置文件中，不要配置mode: "history"）

　　再次npm run build ,打開(kāi)index.html，就可以看到項(xiàng)目了。

4.此外，我們有時(shí)候會(huì)遇到這樣的問(wèn)題：

　　build之后，我們寫(xiě)的背景圖并沒(méi)有出現(xiàn)；可以試著這樣做：

　　 (1) 找到build目錄下的utils.js文件

　　

　　(2)然后在如下圖所示處加上：publicPath:'../../'

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/nuonuo-D/p/10516394.html

總結(jié)

以上是生活随笔為你收集整理的vue项目npm run build后如何在本地查看效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。