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

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


文章目录

  • [【集成部署打包】vue3+django集成部署打包成exe 文件](#【集成部署打包】vue3+django集成部署打包成exe 文件)
    • [1. vue 打包部署配置](#1. vue 打包部署配置)
    • [2. django 打包部署配置](#2. django 打包部署配置)
    • [3. 打包操作](#3. 打包操作)
  • 总结

1. vue 打包部署配置

js 复制代码
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 文件中

python 复制代码
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',
            ],
        },
    },
]
python 复制代码
# 静态资源url访问的前缀
STATIC_URL = 'static/'

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

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

项目中 urls.py

python 复制代码
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 (在终端运行)
undefined 复制代码
pip install pyinstaller
  1. 生成spec文件(在终端运行)
undefined 复制代码
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 配置

python 复制代码
# -*- 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 目录下即可解决问题



总结

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

相关推荐
会飞的鱼先生36 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
hyhrosewind40 分钟前
Python函数基础:说明文档(多行注释),函数嵌套调用,变量作用域(局部,全局,global关键字),综合案例
python·变量作用域·函数说明文档(多行注释)·函数嵌套调用·局部变量和全局变量·函数内修改全局变量·global关键字
苹果酱05671 小时前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
一点.点1 小时前
李沐动手深度学习(pycharm中运行笔记)——04.数据预处理
pytorch·笔记·python·深度学习·pycharm·动手深度学习
一点.点1 小时前
李沐动手深度学习(pycharm中运行笔记)——07.自动求导
pytorch·笔记·python·深度学习·pycharm·动手深度学习
大霸王龙2 小时前
Python对比两张CAD图并标记差异的解决方案
python·opencv·计算机视觉
咪库咪库咪3 小时前
vue1
前端·vue.js
萧鼎3 小时前
PDFMathTranslate:让数学公式在PDF翻译中不再痛苦
python·pdf
@_猿来如此3 小时前
Django 实现电影推荐系统:从搭建到功能完善(附源码)
数据库·后端·python·django
洋333 小时前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js