如何打包vue.js項目

打包vue.js專案的方法：先開啟「webpack.dev.conf.js」檔案；然後修改build下的assetsPublicPath；最後一個終端執行「npm run build」指令即可。

本教學操作環境：windows7系統、webstorm2017.1.4&&vue2.0版本、Dell G3電腦。

推薦：vue教學

vue專案打包步驟

vue專案打包

一、終端機執行指令npm run build

二、打包成功的標誌與專案的改變，如下圖：

3、點選index.html，透過瀏覽器運行，出現下列報錯，如圖：

四、那麼應該如何修改呢？
具體步驟如下：
1、查看package.js檔案的scripts指令
2、開啟webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點擊，跳到index.js檔案
3、其中dev是開發環境，build是建構版本，找到build下面的assetsPublicPath: '/',然後修改為assetsPublicPath: './',即「/」前加點。
4、終端機運行 npm run build 即可。

此時點擊index.html，透過瀏覽器運行便，會發現動態綁定的static的圖片找不到，故static必須使用絕對路徑。將圖片路徑修改為絕對路徑，至此，打包完成。

 

以上是如何打包vue.js項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！