1. 程式人生 > >vue-cli —— 項目打包及一些註意事項

vue-cli —— 項目打包及一些註意事項

style sset inf vue-cli 技術分享 生成 界面 重復 str

打包方法:

1.把絕對路徑改為相對路徑:打開config/index.js 會看到一個build屬性,這裏就是我們打包的基本配置了。在這裏可以修改打包的目錄,打包的文件名。最重要的是一定要把絕對目錄改為相對目錄。即:把 assetsPublicPath:‘/‘ 改為 assetsPublicPath:‘./‘

技術分享圖片

2.在當前工程文件下使用命令:npm run build 進行打包。

註意:

1.打包結束後,如果要直接在本地打開(即直接打開生成的dist文件下的index.html即可),可以在 npm run build 完成之後,執行命令:npm install -g http-server // 該命令只需執行一次, 安裝過之後, 以後就不需要重復安裝了。

2.直接打開生成的dist文件下的index.html時,可能會發現該界面的圖片都沒有加載出來,這是因為圖片引用路徑出錯了。比如,我是把圖片資源放在static文件夾下了,那麽圖片引用時必須使用相對路徑,而不能使用絕對路徑。

錯誤的示例:

技術分享圖片

正確的示例:

技術分享圖片

vue-cli —— 項目打包及一些註意事項