Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail "vue and django how to achieve integrated packaging", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue and django how to achieve integrated packaging" article can help you solve doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

1. First create the django project and create the vue project under the django project file

two。 Modify setting.py under the django project file

Modify the django template path to the dist of the vue project

TEMPLATES = [{'BACKEND':' django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR+ "/ vue-resources/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',],},},]

Modify django static file path

# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/2.2/howto/static-files/STATIC_URL ='/ static/'STATICFILES_DIRS = [os.path.join (BASE_DIR, "vue-resources/dist/static/")]

This is basically enough.

3.vue packaged configuration

Since both django and vue can provide one service, multiple domain names will need to cross-domain when testing api, and it takes about 20-40 seconds to package files directly with run build.

Ideally, you don't need multiple domain names, and you can quickly package by modifying a file. Then the best way is to increase the speed of build.

My way is:

1. Copy wepack.dev.config.js file and name it webpack.watch.config.js

two。 Modify configuration information

(1) add output configuration (use this configuration to package for about 2-3 seconds)

Output: {path: config.build.assetsRoot, filename: utils.assetsPath ('js/ [name]. [hash] .js'), chunkFilename: utils.assetsPath ('js/ [id]. [hash] .js')}

(2) optional modification can effectively improve the packing speed (with this configuration in about 1 second)

Devtool: false

3. Create a new packaging command package.json

Scripts: {. "watch": "webpack-- watch-- config build/webpack.watch.conf.js",...}

In this way, the effect of monitoring updates is realized, npm run watch

Note: this configuration is only convenient for local development.

After reading this, the article "how to achieve integrated packaging of vue and django" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.