在django部署时,怎么使用vue打包的dist文件。进行项目整合

当时被浏览器的cors搞得红温,不知道有伙伴遇到过类似的问题,就是配置好了跨域问题,但是在eage浏览器上,还是有请求被拦截,但是chrome上却不会,所以突然有了开发时亲啊后端分离,项目整合解决这个问题,并在在部署上线一次性化。

项目目录

下图是一个实际项目的一个目录

dist是vue项目npm run build 打包得到的,会在项目目录自动生成 dist 文件夹; 

配置文件

setting.py

................

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        'DIRS': [os.path.join(BASE_DIR, 'dist')],
        "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",
            ],
        },
    },
]
..................
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "dist/static"),
]
APSCHEDULER_RUN_NOW_TIMEOUT = 25

路由引入

urls.py

from django.contrib import admin
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')),
    ..................
]

最后项目运行

http://127.0.0.1:8000/

<think>好的,我现在需要帮助用户解决如何修改Vue打包生成的dist文件中的页面内容的问题。首先,我得理解用户的需求。用户可能在部署Vue应用后,发现需要调整生成的静态文件内容,比如HTML、CSS或JS,但又不熟悉正确的流程。 首先,我应该回忆Vue项目的打包流程。用户提到使用npm run build生成dist文件夹,这部分是正确的。但是直接修改dist里的内容并不是推荐的做法,因为每次重新打包都会覆盖这些更改。用户可能需要长期或频繁修改,所以需要找到可持续的方法。 接下来,我应该考虑正确的修改方式。通常,修改源文件(如Vue组件、模板或配置文件)然后重新打包才是正确做法。例如,修改public/index.html中的模板,或者调整vue.config.js中的配置来改变输出结果。这样,每次构建都会包含最新的修改,避免手动修改dist。 不过,用户可能有特殊情况需要直接修改dist文件,比如紧急修复生产环境的问题。这候需要提醒用户这种方式的临性,并指导如何正确操作。同,应该警告他们这样做的问题,比如重新构建会丢失更改。 然后,我需要参考用户提供的引用内容。引用[2]提到修改webpack配置,这可能涉及调整构建过程,比如修改输出路径或文件名。引用[3]展示了Django整合Vue dist文件的方式,可能涉及模板路径的配置,但用户的问题更关注如何修改dist内容本身。 可能的问题点包括:用户可能不知道如何定位需要修改的文件,比如HTML结构在public/index.html中定义,而CSS和JS是构建生成的。需要分步骤说明如何修改源文件,并重新构建。同,如果用户确实需要修改dist文件,要说明步骤,但强调这是临解决方案。 最后,生成相关问题需要考虑用户可能遇到的后续疑问,比如如何避免重复修改dist,如何配置构建过程,或者如何处理缓存问题。确保回答结构清晰,步骤明确,帮助用户理解正确的工作流程。</think>修改Vue打包生成的$dist$文件内容需要通过修改源代码重新构建实现,直接修改$dist$文件属于临应急方案且不可持续。以下是具体步骤说明: ### 一、推荐方案:通过源代码修改后重新打包 1. **修改HTML模板** 在$public/index.html$中添加或调整基础HTML结构,例如修改标题、添加meta标签: ```html <head> <meta charset="utf-8"> <title>修改后的标题</title> <meta name="description" content="新的页面描述"> </head> ``` 2. **调整构建配置** 通过$vue.config.js$修改webpack配置(引用[2]): ```javascript module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].templateParameters = { customContent: '新增的全局变量' } return args }) } } ``` 3. **修改样式/逻辑** 在对应的Vue组件中修改$<template>$, $<style>$, $<script>$代码后重新执行: ```bash npm run build ``` ### 二、临方案:直接修改dist文件(不推荐) 1. 定位到$dist/index.html$文件 2. 使用文本编辑器修改静态内容 3. 注意浏览器缓存问题(需添加版本号或清除缓存) 4. 此修改会在下次构建被覆盖 ### 三、部署整合注意事项(引用[3]) 当Django集成Vue,需确保$urls.py$正确指向修改后的模板路径: ```python path('', TemplateView.as_view(template_name='dist/index.html')) ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值