蓝鲸SaaS开发搭建Django+Vue前后端分离的开发框架

开发框架2.0使用说明：docs.bk.tencent.com/blueapps/US…

使用vue-cli 4.x, 安装， 使用请参考官方文档 cli.vuejs.org/zh

VUE PROJECT 开发配置

1. 在项目的根目录下运行 vue create vue_app

2. 修改package.json， 添加dev, stag, 修改build dest

  "scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service build --dest ../static/dev",
    "stag": "vue-cli-service build --mode=stag --dest ../static/stag",
    "build": "vue-cli-service build --dest ../static/dist",
    "lint": "vue-cli-service lint"
  },

3. 添加 .env.stag 文件

NODE_ENV = stag

4. 修改public/index.html 添加SITE_URL

    <script>
      window.site_url = {{ SITE_URL }}
    </script>

5. 添加vue.config.js，babel.config.js babel.config.js 完整配置

module.exports = {
  // presets: [
  //   '@vue/cli-plugin-babel/preset'
  // ]
  presets: [['@vue/app', { useBuiltIns: 'entry' }]]
}

vue.config.js完整配置

var path = require('path')

var env = process.env.NODE_ENV
var isStag = env === 'stag' //npm run stag  
var isProduction = env === 'production' // npm run buid  
let publicPath = '/', // './static/dev' // npm run dev  
let indexPath = 'dev_index.html'
if (isStag) {
  indexPath = 'test_index.html'
  publicPath = './static/stag'
} else if (isProduction) {
  indexPath = 'index.html'
  publicPath = './static/dist'
}

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

module.exports = {
  lintOnSave: 'error',
  publicPath: publicPath,
  indexPath: indexPath,
  devServer: {
    proxy: 'http://localhost:8000',
    disableHostCheck: true,
    port: 8080
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@c', resolve('src/components'))
      .set('@s', resolve('src/service'))
  }
}

6. 添加axios， 修改main.js, npm i axios -S

main.js

import axios from 'axios'

const http = axios.create({
  baseURL: window.site_url,
  headers: { 'X-Requested-With': 'XMLHttpRequest' },
  xsrfCookieName: 'csrftoken',
  xsrfHeaderName: 'X-CSRFToken',
  withCredentials: true
})
Vue.prototype.$http = http

django 框架的修改

1. 修改config/default.py 添加 static/dev, static/stag, static/dist 模板地址

os.path.join(BASE_DIR, 'static', 'dev'),
os.path.join(BASE_DIR, 'static', 'stag'),
os.path.join(BASE_DIR, 'static', 'dist'),

Templates配置完整版如下

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': (
            os.path.join(BASE_DIR, 'templates'),
            os.path.join(BASE_DIR, 'static', 'dev'),
            os.path.join(BASE_DIR, 'static', 'stag'),
            os.path.join(BASE_DIR, 'static', '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',
                'blueapps.template.context_processors.blue_settings'
            ],
        },
    },
    {
        'BACKEND': 'blueapps.template.backends.mako.MakoTemplates',
        'DIRS': (
            os.path.join(BASE_DIR, MAKO_DIR_NAME),
        ),
        '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',
                'blueapps.template.context_processors.blue_settings'
            ],
            # mako templates cache, None means not using cache
            'module_directory': os.path.join(os.path.dirname(BASE_DIR),
                                             'templates_module', APP_CODE)
        },
    },
]

2. views.py 定义vue_app 跳转方法，以及定义好url（略）

def vue_app(request):
    env = os.getenv('BK_ENV')
    if env == 'testing':
        return render(request, 'test_index.html')
    elif env == 'production':
        return render(request, 'index.html')
    return render(request, 'dev_index.html')

编辑部署

1. 运行 npm run stag 编译前端testing 环境
2. 运行 npm run build 编译前端生产环境
3. 把编译后的前端文件提交到仓库，即可部署测试环境和生产环境