vue-cli4 部署到伺服器與渲染(坑超級多寫了我的經驗)
我先買了騰訊雲的三個月的學生輕量級伺服器,選了centOs系統
1.首先需要配置伺服器,給伺服器設定密碼
2.下一步我做的就是打包自己的vue-cli專案
npm run build
3.在當前目錄下vue會給你生成一個名字叫dist的檔案,把他壓縮成tar格式的文壓縮包,然後再把vue專案裡面的package.json檔案和剛才的壓縮包一起拷貝過來一會兒要上傳到伺服器
4.下載安裝Xshell軟體(因為官方給的那些東西都很爛不能上傳檔案之所以用這個軟體來遠端操作)
5.把Xshell配置遠端到伺服器上(百度上有一堆教程我就不講了)
6.在伺服器上進入根目錄
cd /
7.新建一個放自己專案的檔案(我這裡檔名叫projects)
mkdir projects
8.進入projects目錄
cd /projects
9.首先安裝lrzsz
# yum -y install lrzsz
10.上傳檔案,執行命令rz,會跳出檔案選擇視窗,選擇壓縮好的dist檔案與package.json檔案,點選確認即可。
# rz
11.解壓剛才上傳的dist檔案(這裡用的壓縮包名稱是dist.tar)
tar -xvf dist.tar
12.安裝node.js
- 上node.js官網下載linux版本的安裝包
- 上傳安裝包
# rz
-
解壓
tar -xvf 安裝包名
-
移動
cd /usr/local/ mv 解壓檔案路徑/安裝包名/ nodejs
-
npm與node命令生效
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ ln -s /usr/local/nodejs/bin/node /usr/local/bin/
-
檢視nodejs是否安裝成功
node -v npm -v
13.進入projects目錄
cd /projects
14.載入我們專案需要的包
npm install
15.安裝Nginx (這裡講的很詳細)與開始渲染
https://www.cnblogs.com/wbl001/p/11546450.html
安裝所需外掛
-
安裝編譯工具及庫檔案
1
yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel pcre-devel
gcc、gcc-c++ # 主要用來進行編譯相關使用
openssl、openssl-devel # 一般當配置https服務的時候就需要這個了
zlib、zlib-devel # 主要用於檔案的解壓縮
pcre、pcre-devel # Nginx的rewrite模組和HTTP核心模組會用到PCRE正規表示式語法
make # 遍歷
make install # 安裝
-
建立nginx目錄
cd /usr/local mkdir nginx
-
下載並解壓nginx
cd /usr/local/nginx wget https://nginx.org/download/nginx-1.14.2.tar.gz #下載 tar -zxvf nginx-1.6.2.tar.gz #解壓
-
進入安裝包目錄
cd nginx-1.14.2
-
編譯安裝nginx,預設安裝到 /usr/local/nginx中
./configure make && make install
-
切換到/usr/local/nginx安裝目錄(看看就行)
cd /usr/local/nginx
-
進入conf目錄修改nginx.conf
cd /usr/local/nginx/conf vi nginx.conf
(如果不知道怎麼使用vi命令看這個文件 https://blog.csdn.net/cyl101816/article/details/82026678 )
location / { root /projects/dist; // 指定目錄 index index.html index.htm; }
-
儲存檔案 ( 先按ESC鍵,wq!強制儲存並退出)
-
檢視nginx.conf配置是否正確
/usr/local/nginx/sbin/nginx -t
-
16.啟動nginx服務
切換目錄到/usr/local/nginx/sbin下面
啟動nginx命令:
./nginx
附件(可以忽略)
cd /usr/local/nginx/sbin/
./nginx #啟動
./nginx -s stop #停止
./nginx -s quit #退出
./nginx -s reload #重啟 修改配置後重新載入生效<br><br>./nginx -s reopen :重新開啟日誌檔案<br>
17.檢視nginx服務是否啟動成功
ps -ef | grep nginx
18.訪問你的伺服器IP
顯示
說明安裝和配置都沒問題OK了
相關文章
- 從 Flutter 的視訊渲染到 App 落地經驗FlutterAPP
- 寫給初級前端的面試經驗前端面試
- 我已經寫了48年程式碼了,我感覺我還能寫下去
- 我的公眾號寫作經驗分享
- 我在Facebook學到的10個經驗
- 微博“異地多活”部署經驗談
- 多年億級流量下的高併發經驗總結,我毫無保留的寫在了這本書中
- 經驗分享|裸金屬伺服器部署伺服器
- 用WSL2+Docker Desktop部署InLong的坑和經驗Docker
- 我早年在Google學到的10條經驗Go
- 渲染中的光照著色方式:PBR(Physically Based Rendering,物理基礎渲染)與 傳統經驗渲染
- vue-cli3專案 升級到 vue-cli4 的方法總結Vue
- 為了提高開發效率,我實現了 uTools 的超級皮膚
- 視覺化—gojs 超多超實用經驗分享(一)視覺化GoJS
- 視覺化—gojs 超多超實用經驗分享(三)視覺化GoJS
- 視覺化—gojs 超多超實用經驗分享(四)視覺化GoJS
- Apple Watch應用開發經驗談:我遇到的那些坑APP
- 搭載Dubbo+Zookeeper踩了這麼多坑,我終於決定寫下這篇!
- Matt Cutts:我早年在Google學到的10條經驗TTSGo
- django專案部署到centos,踩的坑DjangoCentOS
- 開發踩坑經驗
- 請各位高人幫我指點一下我的職業規劃!謝謝了!(5年多工作經驗)
- vue 伺服器渲染初體驗Vue伺服器
- 無伺服器召喚師:我們已經進入了無伺服器超級計算機的時代 - David Wells伺服器計算機
- 使用 React 一年後,我學到的最重要經驗React
- 空山新雨後 [Unreal Engine 超寫實渲染]Unreal
- (轉)我的助理辭職了!–值得看一下的經驗
- Flutter1.9升級體驗總結(幫大家填坑了)Flutter
- 2年開發,我總結了7條經驗!
- 部署 ShowDoc 到自己的伺服器伺服器
- js到底需不需要寫分號(;), 我被坑了,該長記性了JS
- elementUI 多級選單動態渲染UI
- Zookeeper,你可把我坑慘了!
- 快取把我坑慘了..快取
- puppeteer踩坑經驗之談
- 外包避坑經驗小結
- 線上高併發應用重構(寫)填坑經驗分享(一)
- 線上高併發應用重構(寫)填坑經驗分享(二)