vue_app 集成到Django你中

根目录下创建vue项目

1. vue create vue_app

选择必要的组件 vuex, vue-router, es-lint ...

2. 添加vue.config.js

var env = process.env.NODE_ENV
var isProduction = env === 'production'
let publicPath = '/'
if (isProduction) {
  publicPath = './static/dist'
}

module.exports = {
  lintOnSave: 'error',
  publicPath: publicPath,
  indexPath: '../../templates/index.html',
  devServer: {
    proxy: 'http://127.0.0.1:8000',
    disableHostCheck: true,
    port: 8080
  }
}

3. 修改public/index.html, 添加 window.site_url = '{{ SITE_URL }}'

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

4. 添加HTTP请求库axios， 修改main.js

yarn add axios

import axios from 'axios'

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