django前后端结合_Vue+Django 前后端分离部署

Vue部分

我用的脚手架是vue-cli3，webpack有所调整，在根目录下新建vue.config.js。

# vue.config.js的部分代码

vue-cli文档​cli.vuejs.org

const path = require("path")

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
   chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
  },
  publicPath: './',
  assetsDir: "static",  // 静态文件打包到dist/static中
}

在shell中运行命令：npm run build 进行打包

Django部分

在项目根目录新建frontend文件夹，把打包好的dist放到frontend中^_

修改settings.py

settings.py

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',
            ],
        },
    },
]
# 配置静态资源目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

# 把跨域开启
CORS_ORIGIN_ALLOW_ALL = False

修改urls.py，配置入口路由

# urls.py

from django.views.generic.base import TemplateView
urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
]

启动Django

访问url成功显示