快捷導(dǎo)航

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

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

這篇文章主要介紹了vue與django集成打包的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學(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)文章

vue使用混入定義全局變量、函數(shù)、篩選器的實例代碼
本文主要是給大家分享利用混入mixins來實現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點是ide會有方法、變量、篩選器提示。對vue中利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識感興趣的朋友，跟隨小編一起看看吧
2019-07-07
vue使用自定義指令實現(xiàn)一鍵復(fù)制功能
在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧
2024-09-09
vue打包后dist文件在本地啟動運行的步驟
這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動運行的簡單步驟,文中通過代碼示例以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考價值,需要的朋友可以參考下
2023-09-09
Vue中keep-alive組件的深入理解
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過實例代碼結(jié)束的非常詳細，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關(guān)于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-02-02
Vue.js項目部署到服務(wù)器的詳細步驟
這篇文章給大家介紹了Vue.js項目部署到服務(wù)器的詳細步驟，既然是部署到服務(wù)器，肯定是需要一個云的。具體思路步驟大家可以參考下本文
2017-07-07
vue實現(xiàn)添加與刪除圖書功能
這篇文章主要介紹了vue實現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
vue項目安裝使用vconsole方式
這篇文章主要介紹了vue項目安裝使用vconsole方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11
vue中?根據(jù)判斷條件添加一個或多個style及class的寫法小結(jié)
這篇文章主要介紹了vue中?根據(jù)判斷條件添加一個或多個style及class的寫法,文中給大家補充介紹了關(guān)于vue里:class的使用結(jié)合自己的實現(xiàn)給大家講解，需要的朋友可以參考下
2023-03-03
Vue 路由切換時頁面內(nèi)容沒有重新加載的解決方法
今天小編就為大家分享一篇Vue 路由切換時頁面內(nèi)容沒有重新加載的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09