Vue 與 Django 整合：從編輯到部署的完整指南

更新日期： 2025 年 1 月 1 日

將 Vue 與 Django 結合是一種強大的開發方式，讓我們能夠利用 Vue 的靈活性構建現代化的前端，並通過 Django 提供穩定的後端支持。

本文將帶領新手逐步完成，從編輯 Vue 原始文件到成功部署的完整流程，確保應用能在生產環境中正常運行。

編輯 Vue 原始文件

在專案的開發階段，我們通常需要編輯以下核心文件：

Vue 的入口文件

frontend/scripts/app.js 是 Vue 應用的入口文件，負責初始化應用並將其掛載到指定的 DOM 元素：

import { createApp } from 'vue';
import App from './App.vue'; // 引入主組件
import router from './router.js'; // 引入路由配置

const app = createApp(App);
app.use(router);
app.mount('#app'); // 掛載到 #app 元素

主組件文件

frontend/scripts/App.vue 是 Vue 應用的主組件，定義了應用的主要結構和樣式。

路由配置

frontend/scripts/router.js 配置應用的路由邏輯，決定不同 URL 應顯示的內容。

打包 Vue 應用

打包是將開發階段的代碼壓縮並生成瀏覽器可直接執行的文件的過程。

使用 npm run build

在項目目錄中執行以下命令，通過 esbuild 打包 Vue 文件：

npm run build

檢查打包輸出

打包完成後，確認文件是否正確生成：

• 打包結果應位於 static/scripts/frontend_app.js。
• 該文件包含了所有 Vue 組件和路由邏輯。

手動執行打包腳本（選擇性）

若需要手動執行打包腳本，可運行以下命令：

node build.js

清理靜態文件

為避免舊的靜態文件干擾部署，建議在每次打包後清理 staticfiles/ 目錄。

使用 PowerShell 清理文件

Remove-Item -Path staticfiles\* -Recurse -Force

收集靜態文件

在完成 Vue 文件的打包後，需執行 collectstatic，將靜態文件集中到 STATIC_ROOT，便於 Django 提供服務。

執行命令

python manage.py collectstatic

這一步會將所有靜態文件（包括 frontend_app.js）複製到 STATIC_ROOT 指定的目錄。

測試應用

啟動 Django 伺服器

運行以下命令啟動開發伺服器：

python manage.py runserver

測試 Vue 應用

在瀏覽器中打開應用，確認靜態文件是否正確加載。例如：

http://127.0.0.1:8000/static/scripts/frontend_app.js

檢查 Vue 應用是否正常運行，並驗證路由和組件功能。

完整執行順序總結

1. 編輯 Vue 文件
   修改 frontend/scripts/app.js、App.vue 或其他組件文件。
2. 執行打包
   使用以下命令打包代碼： npm run build
3. 清理靜態文件
   清空 staticfiles/ 目錄： Remove-Item -Path staticfiles\* -Recurse -Force
4. 收集靜態文件
   執行以下命令將靜態文件集中到 STATIC_ROOT： python manage.py collectstatic
5. 啟動伺服器並測試
   檢查應用是否正確運行。

重要提示

打包配置

確保 build.js 中的配置正確處理 Vue 文件，特別是處理 .vue 文件的插件是否正確設置。

生產環境測試

• 切換到生產模式（DEBUG=False），驗證靜態文件和 Vue 應用是否正常運行。
• 在生產環境中，建議使用專用的靜態文件伺服器（如 Nginx）來提供靜態文件。

結語

完成本文介紹的流程後，您將能夠順利地在 Django 中集成和部署 Vue 應用。

無論是開發階段的快速迭代，還是生產環境的穩定運行，這些步驟都將幫助您確保應用順暢無誤。🎉