Vuecli packaging

Create a folder, blogs, in the current path, using the VUE UI to create projects

Run Vuecli by opening terminal input (NPM run Serve) in the blog_client folder.

Before you package your project, create a new file called vue.config.js in the blog_client directory and set the output location of the static file for your project. Since Django only recognizes static, set the output path to static

The following is the contents of my vue.config.js file:

module.exports = {
    assetsDir: 'static'.// Static resource directory (js, CSS, img)
}
Copy the code

Deploying Django

Create a Django framework using PyCharm

Starting the Django Server

Integrate Vuecli with Django

Now place the vuecli package dist folder in Django’s current folder

distThe directory where the folder resides:

distMove to a location under a Django project:

Set the setting file in Django

Add STATICFILES_DIRS anywhere
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),If you are deploying static files in your project directory, do not delete them
    os.path.join(BASE_DIR, "dist/static"),Plus this
]

Add os.path.join(BASE_DIR,'dist') to DIRS
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates'.'DIRS': [os.path.join(BASE_DIR, 'templates'),
                 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',],},},]Copy the code

Finally, modify the urls file

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(' ', TemplateView.as_view(template_name='index.html')),]Copy the code

The VUE page is displayed. The deployment succeeds.