Vue+Django 前后端分离

Django 作为后台框架， Vue作为前端框架
Vue写好代码后， 打包成静态文件目录，Django设置静态文件查找路径， 找到这个静态文件目录
下面这个例子， 是以一个线上服务为例， 区别是 线上服务使用了 nginx 路由， 所以请求上都加上了一个前缀， 导致文件的查找路径， 也要加上这个前缀

vue项目 打包 成 dist目录， 目录中有index.html 文件
在线上运行的时候， Vue项目可以不需要了， 有这个打包好的 dist目录就行。我的使用方式就直接把Django项目和dist 一起部署的， 并没有在线上部署Vue环境

整体的目录层级是：
|-- dist
| |-- dist
| |-- index.html
| |-- src
| -- static
-- slots_console_backend
|-- lib
|-- manage.py
|-- middleware
|-- release.md
|-- slots_config
|-- slots_console_backend
| |-- database_router.py
| |-- init.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py

Django 中配置寻找静态文件的路径

配置路由

      from django.views.generic.base import TemplateView
      .....
      url(r'', TemplateView.as_view(template_name="index.html")),

配置settings文件中寻找template的目录

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['../dist'],   # 这里， 因为 dist目录是在 slots_console_backend 同级， 这里的当前目录就是 slots_console_backend 里面
        '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',
            ],
        },
    },
]

配置settings文件中， 静态文件的路径

STATIC_URL = '/slots/console/static/'  # 因为我用了nginx的路由， 路由的前缀就是  /slots/console,   所以这里这样写
# STATIC_URL = '/static/'  # 默认情况

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "../dist/static")   # 这里同理， 找到dist下static的路径
]

配置Vue中的路径

1. 修改 config目录中的index文件

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: false
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/slots/console/',  // 线上环境用， 这里需要添加 nginx 路由的前缀
    assetsPublicPath: '/',    // 默认

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off

    // open bundleAnalyzerReport
    // bundleAnalyzerReport: process.env.npm_config_report
  }
}

2. 路由文件

所有的路由， 都要以 slots/console 作为前缀