一、vue項目編譯打包
1、更新node更新庫
2、編譯打包
npm run build
該問題的原因是 之前項目代碼是在windows環境編譯的 現在是在mac環境編譯 所以需要下載相應操作系統的編譯庫
編譯成功之後 會生成一個dist文件夾
裡面的內容就是即將部署到nginx的靜態資源
3、如果想直接啟動vue項目
啟動的時候 如果報webpack-dev-server: Permission denied錯誤
處理方式
a、獲取nodejs模塊安裝目錄訪問權限 （必須執行）
b、安裝 淘寶鏡像 （cnpm）
c、cnpm -v 如果報sudo: cnpm: command not found
說明此時需要配置下cnpm的環境變量
vim ~/.bash_profile
export PATH=/Users/mengfanxiao/nodejs/npm_global/bin:$PATH
source ~/.bash_profile
d、sudo cnpm install webpack-dev-server -g
e、安裝相關依賴
e-1、安裝vue腳手架
sudo cnpm install -g vue-cli
e-2、安裝項目依賴
cnpm install
e-3、安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource
cnpm install vue-router vue-resource --save
e-4、啟動項目
npm run dev或cnpm run dev
二、將vue項目部署到docker nginx並實現訪問
1、安裝最新的nginx
2、先簡單nginx運行起來，方便後面我們拷貝容器內部的nginx配置文件
3、將容器中的配置文件複製到宿主機上 普通方式搭建的nginx只需要關注nginx.conf配置文件 docker方式搭建的 需要關注2個配置文件 nginx.conf和default.conf
docker cp ed2f9784a0eb:/etc/nginx/nginx.conf ~/nginx/conf/
docker cp ed2f9784a0eb:/etc/nginx/conf.d/default.conf ~/nginx/conf.d/
4先停止容易 再刪除容器 重新啟動 （防止端口衝突 修改了下默認端口為7000）
5、將靜態文件放在location指定的目錄下
6、啟動容器
docker run -d --name nginx1 -p 7000:7000 -v /Users/mengfanxiao/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /Users/mengfanxiao/nginx/html:/Users/mengfanxiao/nginx/html -v /Users/mengfanxiao/nginx/logs:/var/log/nginx -v /Users/mengfanxiao/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx
-d 後臺啟動
-name 容器名稱
-p宿主機端口7000 指向容器中端口7000
第一個-v表示將宿主機中的nginx.conf替換調容器中的nginx.conf
第二個-v表示將宿主機中的靜態資源文件替換調宿主機中的靜態資源文件
第三個-v表示容器中的日誌也寫到宿主機上方便查看日誌
第四個-v表示宿主機上的default.conf配置替換掉容器中的default.conf配置
6、查看啟動結果
7、訪問靜態資源
閱讀更多 平凡人筆記 的文章
