打包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中文網其他相關文章!