django-with-vuejs

Fast and clear in DevOps. 中文 README.md

Simple is better.

Step 1: Install frontend dependencies

In the directory where the package.json file is located

cd django-with-vuejs/my_project/vue2_frontend
npm install

Step 2: Build the front end

In the frontend directory

npm run build

Step 3: Start the project with Django's own server

In the directory where manage.py is located

pip install -r requirements.txt
python manage runserver

All done.

---

but if you want to know the principle, keep reading

Principle

• index.html
• static/*

First. index.html

Handle the index.html file with django template engines

In settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ['vue2_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',
            ],
        },
    },
]

We change the TEMPLATES.DIRS so that django template engines know where to find the index.html.

Second. static/*

In settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "vue2_frontend/dist/static"),
]

We add STATICFILES_DIRS setting in settings.py, this can make django find the resource

<script type=text/javascript src=/static/js/vendor.677ef0c9485c32b4f6a9.js></script>

in vue2_frontend/dist/static directory, but it worked only in debug mode.

---

Production

We use Nginx to handle the frontend:

• index.html
• static/*

Django only handle the API which transport data with JSON.

---

Any questions?

New issues