Vue_打包並發布項目

一、 打包vue項目步驟：

1、對當前vue項目進行打包的命令如下：

npm run build

 

 

 2、打包完成，會輸出Build complete並且在vue項目中會生成一個名字為dist的打包文件。如下圖：

 

 

 

 

二、 使用靜態服務器工具包發布打包的vue項目

1、首先安裝全局的serve，如下圖：

 

 

 命令如下：serve + 打包文件名

serve dist   

效果圖如下：

 

 

 

 3、使用瀏覽器訪問上圖中輸出的地址，效果圖如下：

 

 

三、 使用動態 web 服務器(tomcat)發布打包的vue項目

1、修改配置: webpack.prod.conf.js文件，如下圖：

 

 2、重新打包，如下圖：

 

 3、修改dist 文件夾為項目名稱: xxx（本例中xxx為vue_demotest），將 xxx（本例中xxx為vue_demotest） 拷貝到運行的 tomcat 的 webapps 目錄下，如下圖：

 

 http://localhost:8080/xxx（本例中xxx為vue_demotest）

編碼測試：

nom run dev

訪問路徑：http://localhost:8080

編碼，自動編譯打包，查看效果