Vue專案打包,部署到apache伺服器

2021-10-06 02:42:37 字數 1414 閱讀 8101

1、專案配置

2、打包專案,命令:npm run build

3、將生成的dist檔案內容拖至伺服器預設專案位址(web root default location:/data/www/default)

4、後端配置

1.專案配置

在config中的index.js裡build下修改webpack配置:

assetspublicpath: 『/dist/』

注釋:此位置為伺服器訪問下的位址「網域名稱+埠號+位址名稱」

在router中的index.js配置中加上:

2、打包

打包成功如下圖

生成dist資料夾,生成內容如下

3、將生成的dist檔案內容拖至伺服器預設專案位址(web root default location:/data/www/default)

4、配置apache伺服器,

到linux下apache安裝路徑/usr/local/apache/conf下,找到 httpd.conf,(apahce的配置檔案)檢視檔案並編輯

vi httpd.conf
將 allowoverride none改為 allowoverride all

allowoverride all
設定allowoverride all是為了使apache支援.hatccess檔案。

需要修改的兩個地方,

rewritebase /dist/; 

rewriterule . /dist/index.html [l],要新增專案所在檔案的檔名,

最後一步apache重啟

Vue專案打包到django部署

vue專案一般用於實現前端的單頁面富應用,其打包後的檔案可簡單看作靜態檔案,所以可以通過nginx部署,當然也可以通過django部署 畢竟本質上還是乙個html檔案及各css,js檔案的集合 不過前後端的耦合性以及效能就比nginx動靜分離的差一點。但平時開發的時候可以這樣部署,十分方便快捷。測試...

vue打包部署到docker

npm run build 打包vue專案 啟動 docker 將dist目錄通過winscp等方式拷貝到linux伺服器上,同目錄下新建dockerfile dockerfile maintainer 為名字 copy dist home myhtml front 當前目錄的dist資料夾複製到容...

npm打包vue專案部署到nginx

1.build vue project,生成dist目錄 npm run buildstart nginx.exe3.訪問localhost 8082如下 4.nginx測試完畢,此時將我們專案構建後的dist目錄整個複製到nginx根目錄的html資料夾下 c users jalchu nginx...