vue-cli+django+nginx

打包vue项目

1. hash模式不做任何修改，由nginx后台做配合
   a标签的href="/XXX"得改成href="#/XXX"否则页面不进行跳转

2. histroy模式修改nginx

    export default new Router({
    	mode:'history',
      routes: [
        {
          path: '/',
          name: 'Login',
          component: Login
        },
    		{
    		  path: '/regist',
    		  name: 'Regist',
    		  component: Regist
    		},
    		
      ]
    })
   

添加mode:history

部署环境安装

1. ubuntu下python3环境安装网上有很多，此处就不再赘述

2. 安装uwsgi

    #因为ubuntu默认pip为python2安装好python3后将pip3设置为库下载命令
    pip3 install uwsgi
   

3. 安装nginx

    sudo apt-get install nginx
   

如有问题，请百度查询，网上以后详细教程，安装环境并不是本博客重点

项目部署

html页面部署

1. 将打包后的dist文件夹下的文件复制到/var/www/html下

2. 将(ubuntu16.04nginx)，编辑/etc/nginx/sites-available/default在server中添加或修改

    vi /etc/nginx/sites-available/default
    		
    # 项目根路径
    root /var/www/html;
    # ‘/’默认跳转页面
    index index.html;
   

3. 打开浏览器访问服务器地址，即可浏览到正常网页，但是发现无法调用vue-cli中配置的api接口

---

django项目部署

1. 将后台文件复制进linux服务器上（此处用的ubuntu16.04）

2. 进入项目后台目录下编辑uwsgi配置文件并保存

    vim uwsgi.ini
    
    [uwsgi]
    # 反向代理端口
    socket=:9000
    # 不需要nginx服务器可以直接访问端口（socket，http二者只能有其一）
    #http=:9000
    # 项目后台路径
    chdir=/root/TenderingSystem
    master=true
    processes=8
    threads=4
    # 项目自带的wsgi服务
    module=TenderingSystem.wsgi
   

3. 启动uwsgi服务

    uwsgi -d --ini uwsgi.ini
   

4. 编辑nginx服务器配置文件

    vi /etc/nginx/sites-available/default
    
    修改为
    # nginx 8000端口作为本地django后台9000端口的代理进行通信,即外部请求通过8000端口由nginx转发至uwsgi的9000端口交由后台处理
    server{
    	lilsten 8000;
    	location / {
    		include uwsgi_params;
    		uwsgi_pass 127.0.0.1:9000;
    	}
    }
    # 80端口为前端页面端口,访问返回静态页面,加载时会需要访问api接口
    server{
    	listen 80;
    	server_name 【域名或IP】;
    	# html页面根路径
    	root /var/www/html;
    	# 默认跳转首页
    	index index.html;
    	location / {
    		# 404跳转首页
    		try_files $uri $uri/ /index.html;
    	}
    	# vue api接口 -----重要部分
    	# 访问后台api接口时,第一步重写路径,将api前缀去掉,否则后台接口所有路径前都得加上api/,然后转发至本地8000端口即后台代理接口,由8000端口处理接口请求,请求发送至8000端口时,在转交由9000端口处理返回,最终请求成功
    	location /api{
    		rewrite /api/?(.*)$ /$1 break;
    		proxy_pass http://127.0.0.1:8000
    	}
    }
   

django web项目部署利用uwsgi服务器和nginx的反向代理来提供web服务，uwsgi服务器本身性能不高，配合nginx服务器使用提高性能