vue-cli4 部署到伺服器與渲染(坑超級多寫了我的經驗)

薩拉伊丁發表於2020-11-04

 

我先買了騰訊雲的三個月的學生輕量級伺服器,選了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

  1. 上node.js官網下載linux版本的安裝包
  2. 上傳安裝包
    # rz
    

     

  3. 解壓

    tar -xvf 安裝包名
  4. 移動

    cd /usr/local/
    mv 解壓檔案路徑/安裝包名/ nodejs
  5. npm與node命令生效

    ln -s /usr/local/nodejs/bin/npm /usr/local/bin/
    ln -s /usr/local/nodejs/bin/node /usr/local/bin/
  6. 檢視nodejs是否安裝成功

    node -v
    npm -v

 13.進入projects目錄

cd /projects

14.載入我們專案需要的包

npm install

15.安裝Nginx (這裡講的很詳細)與開始渲染

https://www.cnblogs.com/wbl001/p/11546450.html

安裝所需外掛

  1. 安裝編譯工具及庫檔案

    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  # 安裝

  2. 建立nginx目錄

    cd /usr/local
    
    mkdir nginx

     

  3. 下載並解壓nginx

    cd /usr/local/nginx
    
    wget https://nginx.org/download/nginx-1.14.2.tar.gz  #下載
    
    tar -zxvf nginx-1.6.2.tar.gz   #解壓

     

  4. 進入安裝包目錄

    cd nginx-1.14.2

      

  5. 編譯安裝nginx,預設安裝到 /usr/local/nginx中

    ./configure
    
    make && make install

      

  6. 切換到/usr/local/nginx安裝目錄(看看就行)

    cd /usr/local/nginx

  7. 進入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;
            }
  8. 儲存檔案 ( 先按ESC鍵,wq!強制儲存並退出)

  9. 檢視nginx.conf配置是否正確

    /usr/local/nginx/sbin/nginx -t

  10.  

     

 

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了

 

 

 

 

相關文章