之前在一篇的文章中详细阐述了如何部署Nginx的代理uwsgi + django的后台服务,现在轮到部署前端应用vue.js了,vue.js的好处就不多说了,其作为一个轻巧,高性能,可组件化的MVVM库,学习成本要比阵营要低,性能比脏检查的AngularJS不知道高到哪里去了。本文介绍如何在centos的上部署vue.js应用。
建立一个简单的vue.js脚手架项目的完整命令
//安装CNPM
npm install - g cnpm - registry = https :// registry 。npm 。淘宝。组织
cnpm install webpack - g
cnpm install vue - cli - g
//打开要创建的项目路径目录,创建项目
vue init webpack - simple <项目名>
cd <项目名>
cnpm install vue - router - save
cnpm install jquery - 保存
cnpm安装axios - 保存
cnpm安装
//热启动
cnpm run dev
当完成了项目开发之后,进入到vue.js项目目录下,运行cnpm run build打包项目,
需要注意的是,当打包完毕后,需要将入口的index.html的项目dist路径改成相对路径
另外需要注意的一点是,一旦打包vue.js项目,需要确保项目内必须使用vue.js语法来写功能,
比如标签要替换成<router-link>,传统的window.location.href跳转页面也要换成这个。
$ router.push({path:'/ home / first'})这种形式。
登录centos系统,运行chmod 755 / root / md_vue对项目文件授权
修改nginx配置文件vim /etc/nginx/conf.d/default.conf增加下面的配置,这里前端服务默认监听80端口
服务器{
listen 80 ;
server_name localhost ;
access_log / root / md_vue_access 。登录;
error_log / root / md_vue_error 。登录;
client_max_body_size 75M ;
location / {
root / root / md_vue ;
指数指数。html ;
try_files $ uri $ uri / / index 。html ;
}
error_log / root / md_vue / 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
守护进程 = /根/ mypro / uwsgi 。日志
pidfile = / root / mypro / mypro 。PID
修改nginx的配置,把nginx的监听端口改成8000代理端口改成8001
server {
listen 8000 ;
server_name localhost ;
access_log / root / myweb_access 。登录;
error_log / root / myweb_error 。登录;
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重启nginx 。服务
访问测试
大功告成