在之前的一篇文章中詳細闡述了如何部署Nginx代理uwsgi+django后台服務,現在輪到部署前端應用vue.js了，vue.js的好處就不多說了，其作為一個輕巧、高性能、可組件化的MVVM庫，學習成本要比React要低，性能比臟檢查的AngularJS不知道高到哪里去了。本文介紹如何在centos上部署vue.js應用。
建立一個簡單的vue.js腳手架項目的完整命令
//安裝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install webpack -g cnpm install vue-cli -g //打開要創建的項目路徑目錄，創建項目 vue init webpack-simple <項目名> cd <項目名> cnpm install vue-router —-save cnpm install jquery --save cnpm install axios --save cnpm install //熱啟動 cnpm run dev
當完成了項目開發之后，進入到vue.js項目目錄下，運行 cnpm run build 打包項目，需要注意的是，當打包完畢后，需要將入口的index.html的項目dist路徑改成相對路徑
另外需要注意的一點是，一旦打包vue.js項目，需要確保項目內必須使用vue.js語法來寫功能，比如a標簽要替換成<router-link>, 傳統的window.location.href跳轉頁面也要換成this.$router.push({ path: '/home/first' })這種形式。
登錄centos系統，運行 chmod 755 /root/md_vue 對項目文件授權
修改nginx 配置文件 vim /etc/nginx/conf.d/default.conf 增加下面的配置，這里前端服務默認監聽80端口
server { listen 80; server_name localhost; access_log /root/md_vue_access.log; error_log /root/md_vue_error.log; client_max_body_size 75M; location / { root /root/md_vue; index index.html; try_files $uri $uri/ /index.html; } error_log /root/md_vue/error.log error; }
需要注意的是端口不能重復監聽，所以之前的django服務需要讓出80端口，改成監聽8000，而uwsgi服務也需要讓出8000端口改成在8001端口運行服務
修改mypro_wsgi.ini配置文件改端口
[uwsgi] chdir = /root/mypro module = mypro.wsgi master = true processes = 3 socket = 0.0.0.0:8001 vacuum = true pythonpath = /usr/bin/python3 daemonize = /root/mypro/uwsgi.log pidfile = /root/mypro/mypro.pid
修改nginx配置，把nginx監聽端口改成8000代理端口改成8001
server { listen 8000; server_name localhost; access_log /root/myweb_access.log; error_log /root/myweb_error.log; client_max_body_size 75M; location / { include uwsgi_params; uwsgi_pass 127.0.0.1:8001; uwsgi_param UWSGI_SCRIPT mypro.wsgi; uwsgi_param UWSGI_CHDIR /root/mypro; } location /static { alias /root/mypro/static; } }
重啟nginx服務
systemctl restart nginx.service
訪問測試
搞定收工
本文轉載自：https://v3u.cn/a_id_73