1.开发环境
- vue-cli 4.x
- Python 3.9.6
- Django 3.2.8
2.前端 vue
main.js 中
// axios baseUrL , 这个地址写后端部署 nginx 监听的ip:port
axios.defaults.baseURL = 'http://x.xxx.xxx.xxx:81/
vue.config.js 中(没有就在package.json同目录下创建一个)
点击查看代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: '/',
})
在 src/router/index.js 中 点击查看代码
import { createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(), // 使用HTML5模式
routes
})
设置好后，用 npm run build 打包
3.后端
后端采用drf框架，服务器部署时用 uwsgi 提高并发量
利用虚拟机环境部署DRF解决其以来问题……等等，使drf能在服务器跑起来。
测试没问题后，用uwsgi 替换 django的 wsgiref
uwsgi.ini 配置文件
点击查看代码
[uwsgi]
项目第一层的绝对路径
chdir=/opt/ModelNine/RearEnd
项目第二层相对路径，找到 wsgi.py 这个文件的路径
是相对与第一层绝对路径，找到到第二层目录下的 wsgi.py
每个django项目创建时候，其项目内部都有一个和项目同名的文件夹，该文件夹下有一个 wsgi.py 的文件
module=LuffyCity.wsgi
虚拟环境第一层目录的绝对路径（告诉uwsgi 你虚拟环境在哪里）
home=/opt/ModelNine/modlenine
master 启用主进程
master=true
uwsgi的进程数量，官网给出的优化建议是 2*核心数+1 如，单核的话建议值是3
processes=5
是这个socket是用于 nginx+uwsgi 联合部署 unix-socket参数的设置
socket=0.0.0.0:6789
vacuum=true
日志文件，django控制台的输出都会保存在此文件下
daemonize=/var/log/luffycity.log
启动 uwsgi
uwsgi –ini uwsgi.ini
nginx 配置
点击查看代码
前端vue部署 server
server {
listen 80;
server_name _;
charset utf-8;
允许跨域
add_header 'Access-Control-Allow-Origin' '*';
location /{
root /opt/ModelNine/FrontEnd/dist; # vue 打包项目全路径
index index.html; # 指定首页
error_page 405 =200 $request_uri; # 防止405 报错
try_files $uri $uri/ /index.html; # vue-router 采用 HTML5模式下官方指定参数
}
error_page 404 /404.html;
}
后端server
server {
listen 81; # 这个端口就是vue项目中 main.js 内所有axios请求baseURL 路径
server_name _;
charset utf-8;
location / {
uwsgi_pass 0.0.0.0:6789; # uwsgi 的 ip：port
include uwsgi_params;
}
}
Original: https://www.cnblogs.com/GouHuang/p/16116407.html
Author: GouHuang
Title: nginx部署vue+drf 前后端分离项目
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/563823/
转载文章受原作者版权保护。转载请注明原作者出处！