參考vuecli官方文檔

一、構建打包

在發布上線之前，我們需要執行構建打包，將 .less、.vue、.js 等相關資源進行編譯打包，轉換成瀏覽器可以直接識別運行的普通 css、js、html。

# yarn run build 或者 yarn build npm run build

VueCLI 會把打包結果生成存儲到項目的 dist 目錄中。

正確的話應該會得到這樣一個打包結果：

二、本地預覽測試打包結果

注意：不能直接雙擊打開 index.html 運行。

將 dist 放到一個 Web 服務器中運行測試，常見的 Web 服務器：

Ngxin
Apache
tomcat
IIS
。。。。
Node.js

前端安裝配置上面的服務器軟件麻煩，這里推薦使用 Vue 官方推薦的一個命令行 http 服務工具：serve。

dist 目錄需要啟動一個 HTTP 服務器來訪問 (除非你已經將 publicPath 配置為了一個相對的值)，所以以 file:// 協議直接打開 dist/index.html 是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器，例如 serve：

安裝：

# yarn global add serve # 注意：這是在安裝全局包，在任何目錄執行都可以 # 安裝一次就可以了，以后不需要重復安裝，頂多升級重裝 npm install -g serve

然后在你的項目目錄下執行：

# dist 是運行 Web 服務根目錄 serve -s dist

如果啟動成功，你將看到如下提示：

serve 默認占用 5000 端口并啟動一個服務

然后在瀏覽器中訪問給出的地址訪問測試。

你自己先大概的測試一下，確保打包結果可以正常運行，然后交由專業的測試人員進行測試。

如果測試出問題怎么辦？

修改 src 源代碼
重新構建打包

注意：

不要去修改 dist 中的文件代碼，沒有用。

因為每次 npm run build 都會先把原來的 dist 刪除，然后生成新的結果。

三、部署

公司有專門的 devops，說白了就是運維
有些公司沒有專門的運維人員，那就后端負責

你只需要把打包結果給人家就可以了

如果想要自己部署，怎么辦？

買一個服務器
安裝服務器運行環境
阿里云、騰訊云、…

買個域名（非必須）
第一次買非常便宜，幾十塊錢，續費非常貴

把項目代碼推送到你的部署服務端

四、21云盒子

21云盒子技術文檔

總結

以上是生活随笔為你收集整理的Vue项目部署，打包发布上线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。