Django2与@Vue/Cli3整合--访问静态文件404问题

本文详细介绍了如何将Django2与Vue/Cli3进行整合,包括项目创建、配置、静态文件处理及常见问题解决。通过具体步骤演示,帮助读者掌握前后端分离项目搭建技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们首先简要来看下Django2与@Vue/Cli3如何整合


  1. 创建Django2项目
    通过django-admin startproject mysite命令创建
  2. 创建后端服务app
    cd mysite目录后,django-admin startapp backend
  3. 创建vue项目
    vue create frontend

通过三个步骤后,我们可以看到在mysite目录下存在frontend,backend,manage.py,db.sqlite3平级目录。

下面就是django的配置,打开settings.py(在backend目录下)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/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_URL = '/static/'
添加这行
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist"),
]

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),  # 添加这行
]

下面就npm run build,在frontend下会生成dist目录,起django项目,python manage.py runserver,访问http://127.0.0.1:8000,惊奇的发现,首页index.html是可以访问,但是绑定的静态文件全都404

发现问题


为啥会404,我们先看下index.html的文件

截取其中一段
<link href=/css/login.d7cd78d9.css rel=prefetch>

按这个相对路径看,index.htmlcss是同级目录,那href不是应该是./css/login.d7cd78d9.css(多个点),修改,重新运行,发现还是404.

我们再看看django访问静态文件的配置,是访问dist目录下似乎没毛病,但是我们忘记了还有STATIC_URL是访问带static文件夹的,官方文档

解决问题


frontend目录下创建vue.config.js

module.exports = {
    assetsDir: 'static',  #指定`build`时,在静态文件上一层添加static目录
};

接下来就是重新build(index.html的引用地址也同步改了),起django,访问,解决问题

{ "name": "ktg-mes-ui", "version": "3.8.2", "description": "苦糖果MES", "author": "YinJinLu", "license": "MIT", "scripts": { "dev": "vue-cli-service serve", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }, "keywords": [ "vue", "admin", "dashboard", "element-ui", "boilerplate", "admin-template", "management-system" ], "repository": { "type": "git", "url": "https://gitee.com/kutangguo/ktg-mes-ui.git" }, "dependencies": { "@dhtmlx/gantt-vue": "^1.0.0", "@riophae/vue-treeselect": "0.4.0", "axios": "0.24.0", "clipboard": "2.0.8", "core-js": "^3.21.1", "dhtmlx-gantt": "^7.1.11", "echarts": "4.9.0", "element-ui": "2.15.6", "file-saver": "2.0.5", "fuse.js": "6.4.3", "highlight.js": "9.18.5", "html2canvas": "^1.4.1", "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", "nprogress": "0.2.0", "quill": "1.3.7", "screenfull": "5.0.2", "sortablejs": "1.10.2", "vue": "2.6.12", "vue-count-to": "1.0.13", "vue-cropper": "0.5.5", "vue-meta": "2.4.0", "vue-plugin-hiprint": "0.0.60", "vue-router": "3.4.9", "vuedraggable": "2.24.3", "vuex": "3.6.0" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-eslint": "4.4.6", "@vue/cli-service": "4.4.6", "babel-eslint": "10.1.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "4.1.0", "compression-webpack-plugin": "5.0.2", "connect": "3.6.6", "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", "html-webpack-plugin": "^5.5.0", "less": "^4.2.0", "less-loader": "^11.1.3", "lint-staged": "10.5.3", "runjs": "4.4.2", "sass": "1.32.13", "sass-loader": "10.1.1", "svg-sprite-loader": "5.1.1", "vue-loader": "^16.0.0", "vue-template-compiler": "2.6.12" }, "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions" ] }
最新发布
07-29
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值