如何部署Vue專案

有篇好文章 windows下nginx部署若依開源專案

有篇好文章如何用electron技術將vue專案打包成exe可執行檔案

vue專案打包後和後端一起部署在tomact上(小規模開發省事,會暴露後端埠)

用electron技術將vue專案打包成exe可執行檔案,然後給客戶,後端部署在tomact上(electron相關資料少,打包過程中容易遇到太多坑)。

無論是上邊哪種方式,需要注意的點是如果vue專案配置了跨域,注意跨域只在開發環境中有效也就是平時npm run dev的那種,專案打包後，配置中的/api訪問都會對映到檔案上,專案中配置的**將失效。如果想讓vue專案中的跨域設定繼續生效,則需要使用nginx的反向**將所有的請求對映到對應的後端介面上去,否則的話需在專案中指定真實的後端位址

首先將你的vue專案打包好,在本地執行看有木有毛病,資源路徑啥的都先解決啦

如有問題,看這篇新增鏈結描述

安裝docker 新增鏈結描述.

安裝nginx映象

docker pull nginx:latest

啟動nginx容器

新增鏈結描述

將你的專案放到nginx容器中的html檔案裡

首先要進入容器(須知道容器id)的命令是

docker exec -it e72c5a233fff bash

比如專案index.html在本地主機/home/yangcai/nginx/html目錄下存放著,需要向容器 /usr/share/nginx/html目錄中中拷貝

docker cp /home/yangcai/nginx/html/index.html e72c5a233fff:

/usr/share/nginx/html

從容器複製到主機docker cp containerid:container_path host_path的命令

docker cp e72c5a233fff: /etc/nginx/conf.d/ default

.conf /home/yangcai/nginx/conf.d

訪問你的網域名稱就可直接訪問到你的專案啦

第四步中如果你vue專案中的index.html不在 /usr/share/nginx/html當前目錄下,則需要更容器中改/etc/nginx/conf.d/default.conf檔案中root的位置

如我vue中專案index.html在dist目錄下,則需要更改root路徑為

/usr/share/nginx/html/dist

這裡貼上原default.conf檔案

server 
#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#error_page   500 502 503 504  /50x.html;
location = /50x.html 
# proxy the php scripts to apache listening on 127.0.0.1:80
##location ~ \.php$ 
# pass the php scripts to fastcgi server listening on 127.0.0.1:9000
##location ~ \.php$ 
# deny access to .htaccess files, if apache's document root
# concurs with nginx's one
##location ~ /\.ht 
}

另外一種方式,啟動容器時可以採用檔案對映,在本地主機建立default.conf,對映nginx容器中的配置檔案default.conf,改變root路徑指向本地主機的dist目錄,但我沒成功過,這裡就不說啦,可以看看別人的部落格

如何部署Vue專案

如何在nginx下部署vue專案

vue專案部署

centos部署vue專案

如何部署Vue專案

如何在nginx下部署vue專案

vue專案部署

centos部署vue專案

相關推薦