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
- 我的公眾號寫作經驗分享
- 用WSL2+Docker Desktop部署InLong的坑和經驗Docker
- 寫給初級前端的面試經驗前端面試
- 多年億級流量下的高併發經驗總結,我毫無保留的寫在了這本書中
- 經驗分享|裸金屬伺服器部署伺服器
- 渲染中的光照著色方式:PBR(Physically Based Rendering,物理基礎渲染)與 傳統經驗渲染
- 視覺化—gojs 超多超實用經驗分享(一)視覺化GoJS
- 視覺化—gojs 超多超實用經驗分享(三)視覺化GoJS
- 視覺化—gojs 超多超實用經驗分享(四)視覺化GoJS
- vue-cli3專案 升級到 vue-cli4 的方法總結Vue
- 搭載Dubbo+Zookeeper踩了這麼多坑,我終於決定寫下這篇!
- 為了提高開發效率,我實現了 uTools 的超級皮膚
- django專案部署到centos,踩的坑DjangoCentOS
- 從月入3000的打工仔到年薪20W,寫寫我的經歷
- vue 伺服器渲染初體驗Vue伺服器
- 無伺服器召喚師:我們已經進入了無伺服器超級計算機的時代 - David Wells伺服器計算機
- 使用 React 一年後,我學到的最重要經驗React
- Flutter1.9升級體驗總結(幫大家填坑了)Flutter
- 空山新雨後 [Unreal Engine 超寫實渲染]Unreal
- elementUI 多級選單動態渲染UI
- 線上高併發應用重構(寫)填坑經驗分享(一)
- 線上高併發應用重構(寫)填坑經驗分享(二)
- 2年開發,我總結了7條經驗!
- js到底需不需要寫分號(;), 我被坑了,該長記性了JS
- 等等!這兩個 Spring-RabbitMQ 的坑我們已經替你踩了SpringMQ
- puppeteer踩坑經驗之談
- 伺服器重新部署踩坑記伺服器
- 2024部署經驗
- 快取把我坑慘了..快取
- 應用實戰:從Redis到Aerospike,我們踩了這些坑RedisROS
- 我花了200多萬才買到這些經驗:外行怎麼做成小遊戲爆款?遊戲
- .NET 7 預覽版來啦,我升級體驗了
- Cloudflare 從 PHP 到 Go:遷移與經驗分享CloudPHPGo
- 如何優化MySQL千萬級大表,我寫了6000字的解讀優化MySql
- 天啦,從Mongo到ClickHouse我到底經歷了什麼?Go
- 關於我做事的方法經驗
- 我的刷題經驗總結