首頁 > web前端 > Vue.js > 主體

如何打包vue.js項目

藏色散人
發布: 2023-01-13 00:45:05
原創
6923 人瀏覽過

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

如何打包vue.js項目

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板