Vue簡單專案打包扔Tomcat伺服器上

2021-10-07 12:46:49 字數 1144 閱讀 3474

描述:前兩步可以忽略,主要在第三步配置webpack.prod.conf.js檔案上。

1.使用vue-cli手腳架建立vue專案,vue_demo為專案名稱

vue init webpack vue_demo

...此處省略設定專案名稱等內容

專案目錄結構:

2.建立完成過,進入專案根目錄使用命令執行專案

進入專案:cd vue_demo

執行專案:npm run dev

3.瀏覽器輸入命令列提示的位址檢視執行效果 ,一般位址為http://localhost:8080

1、打包命令:npm run build

2、執行打包檔案:serve dist

3、描述:執行完打包命令後,專案根目錄下會出現disk檔案;使用serve 命令加disk(資料夾)執行;如果提示serve命令不存就執行npm install -g serve 去全域性安裝已下執行環境即可。dist 檔案暫時不能扔到tomcat伺服器執行,因為存在路徑問題。經過第三步修改下配置檔案中的路徑資訊,再次打包,扔到tomcat執行即可。

1、從根目錄進build資料夾找webpack.prod.conf.js檔案,修改檔案中的output值,新增publicpath:'/vue_demo/',注意「,」逗號。修改為/vue_demo/是為了執行tomcat時在瀏覽器輸入localhost:8080/vue_demo位址檢視效果。檔名和配置對應。

2、執行npm run build重新打包。

4、啟動tomcat ,輸入localhost:8080/vue_demo檢視效果。

Vue 簡單專案搭建

1.全域性安裝vue cli腳手架 2.建立乙個webpack模板專案 命令 vue init webpack my project 說明 project name 專案名稱 my project project description 專案描述 author 作者 vue build 打包方式,回...

vue 專案打包

作為乙個前端之前並沒有打包過專案,因此想一下打包的效果,記錄一下我的打包過程 作為乙個開端 首先,專案打包前的目錄結構 然後,執行命令列 npm run build 因為是第一次打包,不熟悉打包的過程,與檔案的變更,首先看了一下檔案的結構,發現沒有compenent與views中檔案的生成目錄。是沒...

vue專案打包

首先開啟config index.js,將assetspublicpath值改為 注意是build的一對花括號裡 assetspublicpath 這個在你的build的一對花括號裡,用來解決js,css路徑問題 然後開啟 build utils.js 加上publicpath 如下 return ...