在阿里云centos7.6上部署vue.js2.6前端应用

之前在一篇的文章中详细阐述了如何部署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 。服务

访问测试

大功告成

转载于 https://v3u.cn/a_id_73