Development framework 2.0 instructions: docs.bk.tencent.com/blueapps/US…

To install vuE-CLI 4.x, refer to the official document cli.vuejs.org/zh

VUE PROJECT development configuration

  1. Run vue Create vue_app in the root directory of your project

  2. Modify package.json, add dev, stag, modify 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"
  },
Copy the code
  1. Add the.env.stag file
NODE_ENV = stag
Copy the code
  1. Modify public/index.html to add SITE_URL
    <script>
      window.site_url = {{ SITE_URL }}
    </script>
Copy the code
  1. Add vue. Config. js, babel.config.js complete configuration of babel.config.js
module.exports = {
  // presets: [
  // '@vue/cli-plugin-babel/preset'
  // ]
  presets: [['@vue/app', { useBuiltIns: 'entry'}}]]Copy the code

Vue.config.js is fully configured

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'))}}Copy the code
  1. Add axios, modify 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
Copy the code

Changes to the Django framework

  1. Config /default.py add static/dev, static/stag, static/dist template addresses
os.path.join(BASE_DIR, 'static'.'dev'),
os.path.join(BASE_DIR, 'static'.'stag'),
os.path.join(BASE_DIR, 'static'.'dist'),
Copy the code

The complete Templates configuration is as follows


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)
        },
    },
]

Copy the code
  1. Views.py defines the vue_app jump method and the 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')
Copy the code

Edit the deployment

  1. Run NPM Run stag to compile the front-end testing environment
  2. Run NPM run build to compile the front-end production environment
  3. You can deploy test and production environments by submitting the compiled front-end files to the repository