Vue從開發到部署

1. 用vue-cli搭建一個vue專案

什么是vue-cli：

vue-cli是官方提供的一個腳手架，用于快速生成一個vue的專案模板；給我們預先定義好一個目錄結構以及基礎代碼，就好比用maven構建一個骨架專案，我們在這個骨架上撰寫我們的代碼，

主要的功能有：

統一目錄結構、本地除錯、熱部署、單元測驗、集成打包上線等，

需要的環境：

Node.js 下載地址：http://node.js.cn/download/
Git 下載地址：http://git-scm.com/downloads

具體的安裝配置步驟就不逐一解釋了，網上搜安裝步驟都有，

確認node.js安裝成功：

cmd 下輸入 node -v，查看是否能列印出版本號，有版本號說明安裝成功了

安裝npm：

npm 是一個軟體包管理工具，就好比我們用maven的時候安裝依賴，和npm功能一樣的有cnpm,這兩個的區別就是npm使用的國外鏡像，在安裝包依賴的時候下載速度會很慢，如果是cnpm可以用淘寶鏡像，下載包依賴就會比較比較快
安裝了Node.js會自帶npm 查看npm是否是安裝了就使用npm -v能列印版本號說明安裝成功了

# -g 就是全域安裝 cnpm 里面使用的就是淘寶鏡像
npm install cnpm -g

# 或者使用如下陳述句解決 npm 速度慢的問題 這個需要每次安裝的時候都帶上這個淘寶鏡像相當于把每次安裝就沒有走npm的鏡像 
# 也可以在npm的組態檔中把鏡像改為淘寶鏡像，但是不建議，建議能用npm就用npm安裝，
# 有時候淘寶鏡像或者cnpm安裝的依賴能用但是打包運行的時候會失敗
npm install --registry=https://registery.npm.taobao.org

安裝vue-cli：

npm install vue-cli -g
# 測驗是否安裝成功
# 查看可以基于哪些模板創建vue應用 通常我們用webpack：它能將vue的ES6語法打包降級為ES5語法，能讓專案有更好的兼容性
vue list

在這里插入圖片描述

創建一個vue-cli應用程式：

創建一個vue專案，我們隨便建立一個空檔案夾在電腦上面，我這里創建的目錄為F:\myproject\vue

創建一個基于webpack模板的vue應用程式

# 這里的 myvue是專案名稱，可以根據自己的需求起名
vue init webpack myvue

在這里插入圖片描述

初始化并運行
```
cd myvue #進入專案目錄
npm install  #安裝依賴
npm run dev #運行專案
# 這幾步都可以切換到WebStorm上面執行 也可以用 VS Code
```
如果出現下面這種情況：

照著提示執行npm audit fix就行

最后運行專案：

會出現下面的地址，在瀏覽器里輸入該地址就能看到運行的vue專案了

2. 專案分析與簡單的代理配置

專案目錄結構：

在這里插入圖片描述

build目錄：當我們寫完專案準備打包部署的時候，相關的打包規則都在寫在build目錄下面
config目錄：像我們常用的專案運行的埠號，代理地址都是在這里配置
node_modules目錄：我們npm install xxx安裝的包依賴都是在這個目錄下
src目錄：里面的main.js就是程式的主入口，components檔案夾用于存放開發的組件
index.html：運行在瀏覽器的vue專案就這一個HTML
package.json：里面有專案名，對專案的描述，作者，啟動方式，打包方式，依賴的版本控制

代理配置：

vue開發都是采用前后端分離的模式，前端vue和后端分開獨立部署，這時候前端的ip地址+埠號往往與后端的ip地址+埠號不同，我們就需要將前后端的ip地址+埠號通過代理的方式映射到一起，

進入config目錄下的index.js檔案，我們能看到：

在這里插入圖片描述

host：寫前端運行的ip地址

port：寫前端訪問的埠號

proxyTable：前端介面的請求要映射到后端的介面路徑上需要在這里面配置代理，

proxyTable: {
    //這里需要說明一下，網上有的博客為了圖方便，
    //甚至之前我遇到的實驗室某人為了圖方便也在這里直接用'/'表示，pathRewrite 里面用'^/'來代替
    //這種做法是不可取的，這種如果說是在開發環境上圖少寫幾個英文來縮短路徑是可以的，但是如果部署到Nginx上會出問題，
    //這里將會是一個大坑，很多人比如新手如果用'/'那么后面部署時可能不好排錯
    '/api':{
        //設定你呼叫的介面域名和埠號 別忘了加http
        target: 'http://192.168.0.1:13002',
        changeOrigin: true,
        pathRewrite: {
            //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉介面時直接用api代替 
            //比如我要呼叫'http://192.168.0.1:13002/user/add'，直接寫‘/api/user/add’即可
            //這時候前端'localhost:8080/api/user/add'就與后端'http://192.168.0.1:13002/user/add'映射上了，
            '^/api': ''
        }
    }

更復雜的代理配置，比如配置多個代理，可以在根目錄下創建一個vue.config.js里面配置，具體就不再詳細描述可以看vue代理配置的官網：https://cli.vuejs.org/zh/config/#devserver-proxy

3. Nginx的安裝

Nginx下載的官網地址：http://nginx.org/en/download.html

在這里插入圖片描述

在Linux服務器上安裝Nginx：

安裝gcc

安裝Nginx需要先將官網下載的原始碼進行編譯，編譯依賴gcc環境，如果沒有gcc環境，則需要安裝：
```
yum install gcc-c++
```
PCRE pcre-devel 安裝

PCRE(Perl Compatible Regular Expressions) 是一個Perl庫，包括 perl 兼容的正則運算式庫，nginx 的 http 模塊使用 pcre 來決議正則運算式，所以需要在 linux 上安裝 pcre 庫，pcre-devel 是使用 pcre 開發的一個二次開發庫，nginx也需要此庫，命令：
```
yum install -y pcre pcre-devel
```
zlib安裝

zlib 庫提供了很多種壓縮和解壓縮的方式， nginx 使用 zlib 對 http 包的內容進行 gzip ，所以需要在 Centos 上安裝 zlib 庫，
```
yum install -y zlib zlib-devel
```
OpenSSL安裝

OpenSSL是一個強大的安全套接字層密碼庫，囊括主要的密碼演算法，常用的秘鑰和證書封裝管理功能即SSL協議，并提供豐富的應用程式測驗或其他目的使用，

Nginx不僅支持http協議，還支持https協議，所以需要在Centos安裝OpenSSL庫，
```
yum install -y openssl openssl-devel
```
從官網下載好安裝包后，將安裝包上傳到服務器上/root

解壓安裝包

tar -zxvf nginx-1.20.1.tar.gz
cd nginx-1.20.1 #進入Nginx目錄檔案

配置

使用默認配置，在Nginx根目錄下執行
```
./configure
make
make install
```
查看安裝路徑：whereis nginx

Nginx常用命令：

cd /usr/local/nginx/sbin/
./nginx   #啟動
./nginx -s stop #停止
./nginx -s quit #安全退出
./nginx -s reload #重新加載組態檔

ps aux|grep nginx #查看Nginx行程

安裝好了直接訪問80埠就行，如果訪問失敗，記得開放服務器的80埠安全組

4.Nginx的簡單配置

進入Nginx的組態檔

cd /usr/local/nginx/conf

打開nginx.conf檔案

整個組態檔結構大致如下：

#全域塊
#user  nobody;
worker_processes  1;

#event塊
events {
    worker_connections  1024;
}

#http塊
http {
    #http全域塊
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    #server塊
    server {
        #server全域塊
        listen       8080;
        server_name  localhost;
        #location塊
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    #這邊可以有多個server塊
    server {
      ...
    }
}

當我們部署前端頁面的時候要主要修改server塊

server {
        #server全域塊
    	#listen監聽的埠
        listen       8080;
    	#server_name服務的ip地址
        server_name  localhost; 
        #location塊 若訪問localhost:8080/路徑就會定位到該location
        location / {
    		#root 指定訪問nginx下目錄檔案里的html檔案夾
            root   html;
    		#index 指定root檔案夾下的入口檔案
            index  index.html index.htm;
        }
		#當訪問localhost:8000/api路徑時就會被代理到 proxy_pass所指定的路徑地址
		location /api {
            #注意代理地址后面那個'/'不能丟 這里的代理地址要和前面vue專案里面的代理地址相對應
			proxy_pass http://192.168.0.1:13002/;
	 	}
		
		#error_page 指定錯誤頁面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

當修改了nginx配置后我們都必須執行一下./nginx -s reload 命令這樣修改后的配置才會生效

5. 打包部署

前面已經搭建了一個vue專案這個時候我們要將vue專案打包部署到Linux服務器的nginx上，

我們來到之前的vue專案檔案中執行npm run build命令

在這里插入圖片描述

當命令執行完后我們會發現在專案根目錄檔案下會多出一個dist檔案夾

在這里插入圖片描述

將dist檔案里面的static檔案夾以及index按照原有的目錄結構通過XFTP上傳到服務器Nginx下的/usr/local/nginx/html目錄，這時一個簡單的vue專案就打包部署好了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/295139.html

標籤：其他

上一篇：openGauss資料庫原始碼決議系列文章—— 執行器決議（二）

下一篇：Nginx+Tomcat負載均衡+動靜分離