快捷導(dǎo)航

vue與django集成打包的實現(xiàn)方法

更新時間：2019年11月11日 14:28:22 作者：改改心情

這篇文章主要介紹了vue與django集成打包的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.首先創(chuàng)建 django項目并在 django項目文件下創(chuàng)建vue項目

2.修改django項目文件下的setting.py

修改django模板路徑指向 vue項目的dist

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

修改django靜態(tài)文件路徑

# 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/")
]

這樣基本就可以了

3.vue打包配置

由于django和vue都可以起一個服務(wù)，導(dǎo)致多個域名這樣測試api的時候就會需要跨域等等問題，而直接用run build 打包文件過于耗時大概20-40秒時間。

理想的狀態(tài)是，不用多個域名，且修改一個文件能快速打包。那么最好的方式就是提高build的速度。

我的方式是：

1.復(fù)制wepack.dev.config.js文件起名 webpack.watch.config.js
2.修改配置信息

（1）添加輸出配置（用這個配置打包大概2-3秒）

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

（2）可選修改可有效提高打包速度（用這個配置大概在1秒內(nèi)）

devtool: false,

3.創(chuàng)建新的打包命令 package.json

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

這樣就實現(xiàn)了監(jiān)聽更新的效果 npm run watch

注：本配置只是方便本地開發(fā)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

elementui 日期選擇器el-date-picker如何給指定日期添加圓點標(biāo)注
這篇文章主要介紹了elementui 日期選擇器el-date-picker如何給指定日期添加圓點標(biāo)注,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
Vuex的安裝、搭建及案例詳解
vuex是一個專門為vue開發(fā)的狀態(tài)管理工具,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下
2022-05-05
詳解mpvue scroll-view自動回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下
2018-10-10
vue?vue-touch移動端手勢詳解
這篇文章主要介紹了vue?vue-touch移動端手勢詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue-manage-system升級到vue3的開發(fā)總結(jié)分析
這篇文章主要為大家介紹了vue-manage-system升級到vue3的開發(fā)總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
Vue3中使用i18n,this.$t報錯問題及解決
這篇文章主要介紹了Vue3中使用i18n,this.$t報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue實現(xiàn)下拉加載更多
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)下拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
vue日期選擇框之時間范圍的使用介紹
這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue中使用element日歷組件的示例代碼
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-09-09
Vue使用axios出現(xiàn)options請求方法
這篇文章主要介紹了Vue使用axios出現(xiàn)options請求，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05