웹 패키지+vue와django의 협업 노트

웹팩+vue와django의 연합을 자신의 비망록으로 정리했습니다.

전제 조건

·django와 vue는 각각 웹 화면에 표시
vue 부분은 제가 제작한'웹 응용 개발 환경 구축'을 참조합니다.

・참조 URL

절차.

front 측 설치

npm install [email protected]

front 측 코드 입력

・입력 위치는 추가 섹션
・"publicPath"정보
원래 output의 path와 웹이 열릴 때의local을 참고로 입력
webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');　　　　
const BundleTracker = require('webpack-bundle-tracker');　//追加

module.exports = {
  entry:'./src/index.js',
  mode: 'development',
  output: {
    publicPath: 'http://127.0.0.1:5500/event_project/frontend/dist/',  // 追加
    filename: 'main.js',
  },
  resolve:{　　　　　　　　　　　　　　　　　　
    extensions: [".vue", ".js"],
  },
  module:{
    rules:[
      {　　　　　　　　　　　　　　　　　　　　
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})　// 追加　　　　　　　　　　　　　　　　　　
  ],
}

django 측 설치

pip install django-webpack-loader

django 측 코드 입력

・입력 위치는 추가 섹션
settings.py(부분 발췌문)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'webpack_loader',   # 追加
    'app',
]
# 以下は一番下に追加
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
    }
}

index.html

{% load render_bundle from webpack_loader %} //追加

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>django</title>
  </head>
  <body>
    <h1>django</h1>
    <div id="app"></div>　　　　//追加
    {% render_bundle 'main' %}　//追加
  </body>
</html>

결실

django 측이 웹에서 열릴 때 다음과 같은 내용이 되면 성공

Reference

이 문제에 관하여(웹 패키지+vue와django의 협업 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hibimosaku/articles/fcec553101e5e4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다