vue使用npm run build命令打包

2022-05-29 16:30:23 字數 939 閱讀 2108

當我們使用vue-cli腳手架完成乙個專案的時候,下一步肯定會想要怎麼把這個專案放到網際網路上或者本地直接開啟呢,我們在本地除錯的時候只要命令列執行npm run dev就可以把這個專案跑起來,但是現在我們要把他放到伺服器上的話用npm run build命令就可以啦。

命令列執行npm run build命令,命令需要在專案目錄下執行

c:\users\john\desktop\demo>npm run build   我的是乙個在桌面叫demo的專案

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

我們就可以像開啟靜態網頁一樣開啟我們完成的專案。

下圖為打包生成的dist資料夾,其中index.html為入口檔案:

沒錯,這時你開啟了index.html檔案,發現網頁一片空白,開啟f12發現console報了幾個錯誤,狀態碼為404:

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

需要修改的檔案在專案目錄下的config資料夾裡的index.js檔案

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

demo

完。

vue使用router link跳轉vue頁面

要完成頁面的跳轉,需要在這幾個檔案下操作 1 主頁面 home.vue 2 被跳轉的頁面 3 router下的index.js page share.vue 1 主頁面 home.vue 前端2 被跳轉的頁面 page share.vue 內容不重要,我這裡的內容是元件,這個無所謂 3 router...

vue使用 uniapp使用

1 style拼接 2 style中使用三元運算子 3 src拼接和迴圈 4 class動態繫結 物件方法 最簡單的繫結 這裡的active加不加單引號都可以,以下也一樣都能渲染 class 判斷是否繫結乙個active class 或者 class 繫結並判斷多個 第一種 用逗號隔開 class ...

vue使用總結

一.vue部署到tomcat 1.修改config目錄下的index.js 3.如果你想要的位址是http localhost 8080 vue這種形式的,需要修改vue的route配置,如下 二.vue請求後台資料 vue請求後台資料在開發環境下會出現跨域問題,可以通過配置 實現跨域訪問,但是在生...