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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章