Vue項目部署服務器

環境

vue 2.6.14
nginx 1.26.0

配置nginx

• 準備一個服務器實例

• 安裝nginx所需依賴

yum -y install pcre*
yum -y install openssl*

• 下載wget

yum install wget

• 下載nginx到/usr/local

cd /usr/local
wget http://nginx.org/download/nginx-1.26.0.tar.gz

• 解壓并安裝

tar -zxvf nginx-1.26.0.tar.gz
cd nginx-1.26.0
./configure
make && make install

• 進入nginx并啟動

cd /usr/local/nginx/sbin
./nginx

開放端口

以阿里云為例

設置安全組-80端口默認開放

如果未配置可以自行設置

打包vue項目

• 在vue項目目錄下執行

npm run build

• 將生成的dist目錄上傳到服務器/usr/local/nginx/html目錄下，最好將dist目錄下的所有文件復制到服務器，而不是將dist放到html，否則要在配置nginx中多一級目錄

配置nginx

• 編輯配置文件 默認路徑/usr/local/nginx/conf/nginx.conf

vi /usr/local/nginx/conf/nginx.conf

• listen修改端口（默認80）

listen  80;

• server_name：如果你有域名，可以設置為你的域名，例如 yourdomain.com www.yourdomain.com。如果沒有域名，只想通過 IP 地址訪問，可以設置為 _ 或者你的服務器 IP 地址，默認localhost

server_name  localhost;

• root將root指令指向存放dist的文件夾，如果沒有將dist的文件拆出來那就得在后面多加一級/dist

root html# 或者絕對路徑
root /usr/local/nginx/html

• index：指定默認的索引文件。對于 Vue項目默認是 index.html

index  index.html index.htm;

• 重啟nginx

/usr/local/nginx/sbin/nginx -s reload

現在瀏覽器輸入服務器公網ip或者域名即可訪問vue項目