docker 搭建vue cli開發環境

開發機上0環境，全都由容器實現

1）建立乙個專案目錄

2）編寫乙個 dockerfile 檔案（區分大小寫），建立乙個開發環境映象

dockerfile

from node:10.19.0-stretch-slim # system local config run true \ # debian china mirrors && sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \ && sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \ # timezone to china && ln -sf /usr/share/zoneinfo/prc /etc/localtime run apt-get update \ && apt-get install -y \ # node-sass 等編譯依賴 make gcc g++ python \ # 命令列工具 zsh curl wget vim git # run wget -o - | zsh || true run sh -c "$(wget -o -)" run true \ && npm config set registry \ && npm install webpack -g \ && npm install -g @vue/cli run mkdir /workspace workdir /workspace # 給這個目錄執行許可權，x是執行許可權 run chmod +x /workspace volume /workspace expose 8080

cmd ["zsh"]

* 以上需要注意的是nodejs版本，和 vue-cli 版本

執行 docker 命令生成映象, 映象名可隨便定義

$ docker build -t nirvana72/vue-dev:nodejs-10_vuecli-4 .

3）寫乙個docker-compose.yml 檔案，利用剛才建立的映象生成乙個容器

docker-compose.yml

version: '3' services: vue-dev: image: nirvana72/vue-dev:nodejs-10_vuecli-4 container_name: vue-dev ports: - "8080:8080" # restart: always volumes: - .:/workspace stdin_open: true

tty: true

* 這裡注意 volumes 設定，. 為當前目錄，對映到容器的工作目錄。在容器中訪問 /workspace 就相當於訪問本機的當前目錄

執行 docker-compose 生成容器

$ docker-compose up -d

如果是windons 或 mac 安裝了 dockerdesktop, 則工具中會顯示出已建立的容器

4）到此 nodejs + vue-cli環境已經建立好了

1）進入容器環境

$ docker exec -it vue-dev zsh

2) 現在已經進入到容器的開發環境中，現在可以使用vue ,npm 等命令建立vue 專案了

# 建立 vue-cli 專案 / vue create vue-demo # 進入專案目錄 / cd vue-demo # 安裝依賴 / npm install # 執行專案

/ npm run serve

由於容器的工作目錄與本機有對映關係，所以在容器中建立的vue專案，實則建立在本機的目錄下

3）訪問專案

http://localhost:8080

現在應該可以正常訪問到容器裡執行的vue專案，由於專案原碼在本機目錄下，所以可以在本機使用開發工具操作**，同樣支援熱更

由於本機0環境，所有環境都在容器裡，所以可以讓開發機環境一直保持乾淨

只要操作dockerdesktop 中的容器開始停止就可以切換工作狀態了

docker 搭建vue cli開發環境

在docker的Linux容器搭建前端開發環境

vue cli 專案搭建

vue cli搭建專案

docker 搭建vue cli開發環境

在docker的Linux容器搭建前端開發環境

vue cli 專案搭建

vue cli搭建專案

相關推薦