npm run build 打包後，如何運行在本地查看效果（Apache服務）

目前，使用vue-cli腳手架寫了一個前端項目，以前一直是使用npm run dev 在8080端口上進行本地調試。項目已經進行一半了，今天有時間忽然想使用npm run build進行上線打包，試試可否成功看到個人項目效果。一開始是毫無頭緒，什麼都不懂，直接是就在命令行上敲下：npm run build命令。

好開心啊，居然沒有報錯。覺得就這麼簡單的成功了，在瀏覽器上輸入：http://localhost/MGT/learnVuex/dist/index.html，一片空白。果真沒有那麼順利。打開控制，看到Console下出現了不少錯誤。

錯誤看不懂，（捂臉）只好百度了。

咱們一開始運行npm run build 命令時，有這麼一段提示：

這段話的意思就是說：構建文件務必放在一個HTTP服務器。直接打開index.html文件將不工做。

看到提示仍是要好好看的，這毛病要改呀！

那麼問題來了，怎麼解決呢？

咱們知道打包的命令文件是config/build.js

到項目目錄下的config文件夾裏的index.js文件中,將build對象下的assetsPublicPath中的「/」，改成「./」便可，就在前面加個點就能夠了，

如今再從新打包一次 npm run build，刷新你的頁面，就能夠看到啦

 

在這以前有一個前提條件，那就是電腦上要安裝服務器。只要你的服務器上有支持http或者https的服務器軟件就能夠，我知道的有nginx和apache兩種，只要安裝了兩個中的一個，而且配合好訪問路徑，把你生成的文件放到服務器下或者映射路徑下，啓動你的服務器軟件便可，而後就可使用你配置的路徑訪問項目。

我在瀏覽器上直接是輸入localhost，打開文件目錄的，http://localhost/MGT/learnVuex/dist/index.html，這麼文件究竟是在哪一個盤下面呢？

我在電腦上上安裝了一個XAMPP，並把apache的映射路徑設置爲：E:/project，而個人項目文件就放在E:/project目錄下面 這就是個人：E:\project\MGT\learnVuex\dist。

因此在瀏覽器上輸入：localhost，就是打開E:/project，就能夠看到這目錄下的因此項目文件啦。