【集成部署打包】vue3+django集成部署打包成exe 文件

【集成部署打包】vue3+django集成部署打包成exe 文件



1. vue 打包部署配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      "@": path.resolve("./src")
    }
  },
  	// 将打包存放到web目录下,并且将所有的静态文件打包到static目录中
   build: {
    outDir: 'web',
    assetsDir:'static'
  }
})

在这里插入图片描述

npm run build 打包后的如上图所示,将打包后的文件全部拖进django项目中

在这里插入图片描述

2. django 打包部署配置

项目中setting.py 文件中

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'web')],  # 配置模板查找路径
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
# 静态资源url访问的前缀
STATIC_URL = 'static/'

# 静态文件在开发过程中的查找目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "web/static"),
]

# 收集静态文件后的存放目录
STATIC_ROOT = BASE_DIR / "staticfiles"

项目中 urls.py

from django.urls import path,include,re_path
from django.views.generic import TemplateView


urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html'), name='index'),  
    re_path(r'^.*/$', TemplateView.as_view(template_name='index.html')),
]

3. 打包操作

  1. 安装 pyinstaller (在终端运行)
pip install pyinstaller
  1. 生成spec文件(在终端运行)
pyi-makespec -D manage.py

hiddenimports 刚开始是没有的,就是每次打包的时候都会出错,提示no module named xxx,这个xxx就是需要我们添加到hiddenimports列表里面的东西。用django写的项目的话,拿必然会用到的是以下5个,后面打包的过程中,如果还有需要隐藏的可再次手动添加。【主要根据报错进行添加,直到没有出现模块相关的报错】

'xxx.apps','rest_framework.authentication','rest_framework.permissions','rest_framework.parsers','rest_framework.negotiation','rest_framework.metadata'

下面是我的 manage.spec 配置

# -*- mode: python ; coding: utf-8 -*-


a = Analysis(
    ['manage.py'],
    pathex=[],
    binaries=[],
    datas=[],
    hiddenimports=['issue.apps','issue.urls','rest_framework.authentication','rest_framework.permissions','rest_framework.parsers','rest_framework.negotiation','rest_framework.metadata'],
    hookspath=[],
    hooksconfig={},
    runtime_hooks=[],
    excludes=[],
    noarchive=False,
)
pyz = PYZ(a.pure)

exe = EXE(
    pyz,
    a.scripts,
    [],
    exclude_binaries=True,
    name='manage',
    debug=False,
    bootloader_ignore_signals=False,
    strip=False,
    upx=True,
    console=True,
    disable_windowed_traceback=False,
    argv_emulation=False,
    target_arch=None,
    codesign_identity=None,
    entitlements_file=None,
)
coll = COLLECT(
    exe,
    a.binaries,
    a.datas,
    strip=False,
    upx=True,
    upx_exclude=[],
    name='manage',
)

  1. manage.spec 配置好后,开始打包
pyinstaller manage.spec

打包生成dist(包在这)与build(临时文件, 没什么用),win+R输入 cmd进入终端到达 dist\manage目录下 ;输入manage.exe runserver --noreload 启动 exe

manage.exe runserver --noreload

注意:

如果出现如下的报错,表示找不到静态文件,将静态文件直接拖进 dist/manage/_internal 目录下即可解决问题

在这里插入图片描述
在这里插入图片描述


总结

以上就是今天要讲的内容,希望对大家有所帮助!!!

### 从零开始使用 Vue3Django 搭建前后端分离框架 #### 前提条件 为了功完项目的搭建,需要满足以下前提条件: - 已经安装 Python 开发环境以及 Django 模块[^2]。 - 需要安装 Node.js 及其包管理工具 npm 或 yarn。 --- #### 后端部分 (Django) 1. **创建 Django 项目** 使用 `django-admin` 创建一个新的 Django 项目并进入该项目目录。 ```bash django-admin startproject my_django_project cd my_django_project ``` 2. **配置 Django 支持静态文件和 API 接口** 修改 `settings.py` 文件以支持跨域请求 CORS 并加载静态资源。 ```python # settings.py INSTALLED_APPS += [ 'corsheaders', 'rest_framework', # 如果需要 RESTful API 功能 ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ] CORS_ALLOW_ALL_ORIGINS = True # 允许所有前端访问后端接口 STATIC_URL = '/static/' MEDIA_URL = '/media/' # 如有媒体文件上传功能,则需额外配置 media 路径 ``` 3. **启动 Django 开发服务器** 运行以下命令以验证后端服务是否正常运行。 ```bash python manage.py runserver ``` --- #### 前端部分 (Vue3) 1. **初始化 Vue3 项目** 使用 Vue CLI 初始化新的 Vue3 项目。 ```bash vue create my_vue_app --default cd my_vue_app ``` 在此过程中可以选择默认模板或者手动选择 Vue 版本和其他插件(如 Vuex、Router 等)。 2. **修改 Axios 请求地址** 安装 Axios 库用于与后端通信,并在 `main.js` 中全局挂载实例。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; // 导入 Axios const app = createApp(App); app.config.globalProperties.$http = axios.create({ baseURL: 'http://127.0.0.1:8000/api/', // 设置后端 API 地址 withCredentials: true, // 是否携带 Cookie 凭证 }); app.mount('#app'); ``` 3. **构建生产版本** 当开发完后,可以通过以下命令打包前端代码供部署到后端使用。 ```bash npm run build ``` --- #### 整合前后端 1. **将 Vue 构建产物集成Django** 将 Vue 打包后的静态文件复制到 Django 的 `static` 目录下。 ```bash cp -r dist/* ../my_django_project/static/ ``` 2. **调整 URL 映射** 在 Django 的 `urls.py` 中添加路由规则以便于处理前端页面请求。 ```python # urls.py from django.urls import path, re_path from django.views.generic.base import TemplateView urlpatterns = [ ..., re_path(r'^.*$', TemplateView.as_view(template_name='index.html')), # 默认渲染 index 页面 ] ``` 3. **启用 Celery 实现异步任务调度** 若涉及复杂业务逻辑或定时任务,可以引入 Celery 提升性能[^3]。例如,在后台执行测试用例的任务定义如下所示: ```python # tasks.py from celery import shared_task @shared_task def run_test_case(test_case_id): """模拟测试用例执行""" print(f"Running test case ID={test_case_id}") ``` 4. **配置 Redis 作为消息中间件** 更新 `settings.py` 添加 Celery 配置项。 ```python # settings.py CELERY_BROKER_URL = 'redis://localhost:6379/0' CELERY_RESULT_BACKEND = 'redis://localhost:6379/0' INSTALLED_APPS += ['django_celery_beat'] ``` --- #### 总结 上述流程涵盖了从零开始利用 Vue3Django 搭建前后端分离架构的核心步骤。具体实施时可根据实际需求灵活调整组件和技术栈组合[^1]^。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值