vue使用npm run build命令打包


vue使用npm run build命令打包項目

 

當我們使用vue-cli腳手架完成一個項目的時候,下一步肯定會想要怎么把這個項目放到互聯網上或者本地直接打開呢,我們在本地調試的時候只要命令行執行npm run dev就可以把這個項目跑起來,但是現在我們要把他放到服務器上的話用npm run build命令就可以啦。

vue使用npm run build命令打包項目

首先

命令行執行npm run build命令,命令需要在項目目錄下執行

C:\Users\John\Desktop\demo>npm run build   我的是一個在桌面叫demo的項目

出現以下提示表示打包完成:

vue使用npm run build命令打包項目

然后

我們就可以像打開靜態網頁一樣打開我們完成的項目。

下圖為打包生成的dist文件夾,其中index.html為入口文件:

vue使用npm run build命令打包項目

沒錯,這時你打開了index.html文件,發現網頁一片空白,打開F12發現console報了幾個錯誤,狀態碼為404:

vue使用npm run build命令打包項目

這是因為引用資源的路徑問題,我們只要在下圖的地方修改一下再打包就可以了。

需要修改的文件在項目目錄下的config文件夾里的index.js文件

vue使用npm run build命令打包項目

改完,再次執行npm run build,然后打開index.html發現sucess

demo

完。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM