vue-cli+django+nginx

矫情吗；* 2021-12-11 03:43 162阅读 0赞

## 打包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服务器使用提高性能