因為在本人實際開發過程中，遇到過這樣的問題——部署到生產環境中的頁面樣式和本地開發環境中的樣式差異巨大，

所以需要通過npm run build打包后，直接在本地查看效果，以便于及時將這些樣式沖突類的問題解決掉：

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

　　項目文件夾下會生成一個dist文件夾，如下圖，里面有一個index.html文件

? ? ? ?

　　但是，直接雙擊打開index.html的話，我們會發現頁面上一片空白，什么都沒有。

　　所以我們還需要進行下面的步驟：

2.在項目文件中，找到config文件夾里的index.js文件，然后修改該文件中的build對象：

　　

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

　　

　　進行完這個步驟后，再次npm run build

　　然后再打開dist目錄下的index.html

　　這時候你也許能成功看到頁面上的內容了，也許會發現頁面還是一片空白，

　　如果是后者，你可以試著進行步驟3：

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

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

　　再次npm run build ,打開index.html，就可以看到項目了。

4.此外，我們有時候會遇到這樣的問題：

　　build之后，我們寫的背景圖并沒有出現；可以試著這樣做：

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

　　

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

　　

?

轉載于:https://www.cnblogs.com/nuonuo-D/p/10516394.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。