· 第一步：項目打包前更改項目config配置

打開項目的?config>index.js文件修改build對象的assetsPublicPath:?屬性值為?'./ ' 如下

?

?

· 第二步：對vue-cli項目進行打包

在運行窗口輸入cmd后打開命令窗口，在項目文件下輸入npm run build命令 如下：

? ? ? D:\vuecellauto\20180716\CellAutoPro>npm run dev

?

打包完成沒有報錯的話會在項目文件夾下生成dist文件夾（ 需要拷貝布署到服務器的項目包），如下

?

?

· 第三步：安裝tomcat服務器布署項目（win 64位系統）

我這里使用使用的綠色解壓版的tomcat_with_jdk ，同時也不需要進行JDK安裝配置環境變量，可以直接使用，就是這么6，下載路徑：

鏈接：https://pan.baidu.com/s/1vjZR6FOTQeZXGN2CjnkbMA ? ? 密碼：2x3w

?

布署項目：下載解壓后將vue-cli項目（dist文件夾）復制到tomcat_with_jdk>webapps文件夾下，如下

?

啟動服務：然后將tomcat服務器跑起來就OK了，如下點擊tomcat_with_jdk>bin 下的startup.bat啟動文件，如下

?

服務啟動成功命令窗顯示如下：

?

注意：當端口沖突時候可以在tomcat_with_jdk>conf下的server.xml文件中修改，如下

?

項目訪問網址：http://localhost:2020/dist/index.html ，注意是http協議

?

PS：怎么檢查端口是否被其他程序占用，比如2020端口？？

在命令窗口輸入netstat -ano 顯示所有活動單口對應的PID值?，通過PID值可以去任務管理器查看pid對應的程序

?

?

?

?

?

總結

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

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