打包Vue項目部署到Nginx並訪問

一、簡介

把 Nginx 做爲靜態資源服務器，用來部署前端項目，本文介紹 Vue 項目打包、部署到 Nginx 的過程，並解決部署後，因 vue-router 使用 history 模式導致的在直接訪問項目和點擊路由鏈接時可以訪問，而根地址刷新頁面空白的問題。

二、打包項目

Vue的有關build、config的文件均保持原本的配置即可，無需更改 ，終端輸入npm run build，成功後會在項目中看到打包好的項目在dist文件夾中。爲了去掉URL中的 “ # ”，此時我們 vue-router 使用的是 history 模式，如下：

export default new Router({
  mode: 'history',
  routes: [...]
  )}

三、Docker安裝Nginx並部署項目

運行環境

1. 阿里雲ECS
2. Ubuntu 系統
3. Docker容器化
   注： 默認已經通過Docker下載好 Nginx 鏡像

部署過程

1. 運行 Nginx 容器
   關於在 Docker 中運行 Nginx 容器，以及其配置文件的有關問題請參考：在Docker中運行Nginx 的前兩部分。
2. 進入容器，並在 根目錄下新建文件夾 xxx（比如你項目的名字）
   進入容器命令：deocekr exec -it 容器名 bash
3. 將打包好的文件（/dist 文件 index.html 和static文件夾）放到Nginx容器 /xxx/ 下
   涉及的命令：
   ①. docker cp 宿主機中文件路徑及容器文件名 容器名：要拷貝到容器裏面對應的路徑

修改配置文件

修改 http server 的location部分如下：

location / {
	root /xxx; # index.html 和 static 所在的目錄
	index index.html index.htm;
	try_files $uri $uri/ /index.html; # 爲解決 history 模式下，刷新頁面時空白的額問題。
}

相關配置參考 vue-router官方教程。

四、重啓容器並訪問

1. 重啓nginx容器：docker stop 容器id，docker start 容器id。
2. 瀏覽器訪問（docker 映射nginx爲80端口時）：http://ip。

  
  
Email : [email protected]
Website : http://beyonderwei.com
  
WeChat: