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 作為前綴