手動(dòng)部署vue項(xiàng)目至Nginx

2020-07-28

手動(dòng)部署vue項(xiàng)目至nginx

準(zhǔn)備：

centos 7.6

git version 1.8.3.1

nginx version: nginx/1.16.1

npm 3.10.10

node-v10.19.0-linux-x64.tar.xz （預(yù)先下載然后上傳服務(wù)器，下載地址http://nodejs.cn/download/）

tar xvf node-v10.19.0-linux-x64.tar.xz  -C /usr/local/         #解壓
mv node-v10.19.0-linux-x64 node     #改名
vim  /etc/profile.d/node.sh     #配置全局變量
  export NODE_HOME=/usr/local/node
  export PATH=$NODE_HOME/bin:$PATH
source /etc/profile.d/node.sh     #使配置生效
node -v     npm   -v     #若顯示版本號(hào)說(shuō)明安裝配置成功

vue 項(xiàng)目：（功能）在web頁(yè)面輸入名字

項(xiàng)目來(lái)源：https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-

清理環(huán)境：

關(guān)閉firewalld

關(guān)閉selinux

iptables端口放行

過(guò)程：
yum -y install nginx git npm        #直接默認(rèn)下載最新版

npm install --global vue-cli      #安裝vue腳手架

git clone https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-.git       #從GitHub上克隆項(xiàng)目到本地

cd Vue2.0_to_do_list-addName-/     #進(jìn)入項(xiàng)目工作目錄

npm install      #下載工作區(qū)的npm工具包

vim config/index.js      #修改assetsPublicPath: ‘/’ 為 ‘./’ 否則不能正確載入靜態(tài)文件

npm run build      #打包生成一個(gè)dist目錄（只有這里面的東西放到Nginx上運(yùn)行才能看到頁(yè)面效果）（dist目錄中包含index.html  static）

vim /etc/nginx/nginx.conf     #修改Nginx配置文件(改端口、主頁(yè)路徑、server_name)

#把原nginx的默認(rèn)主頁(yè)改名
mv /usr/share/nginx/html/index.html  /usr/share/nginx/html/index.html.bak

#把打包好的vue項(xiàng)目拷貝到nginx的主頁(yè)路徑下
cp /root/Vue2.0_to_do_list-addName-/dist/* /usr/share/nginx/html/

#重啟服務(wù)
systemctl start nginx

瀏覽器訪問(wèn)：http://192.168.142.128/
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容