Vue Router 配置

在Vue2 router裡面增加

const router = new VueRouter({
  mode: 'history',
  base: '/admin/', //這裡路徑寫你打包後的網址路徑
  routes: [
    // 這裡是你的路由配置
  ],
});

vue.config.js 打包配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '../static/admin/' //靜態資源路徑
})

然後打包

Flask 路由配置

@blue.route('/admin/', defaults={'path': ''})
@blue.route('/admin/<path:path>')
def get_admin(path):
    return render_template('admin.html')

• @blue.route('/admin/', defaults={'path': ''})：這是 Flask 路由的第一個部分，匹配 /admin/ 路徑。defaults={'path': ''} 表示當沒有提供額外路徑時，預設將 path 參數設置為空字元串。
• @blue.route('/admin/<path:path>')：這是 Flask 路由的第二個部分，使用 <path:path> 模式匹配所有額外的路徑，並將它們傳遞給 path 參數。
• def get_admin(path)：這是路由處理函數，它接受一個 path 參數。這個函數返回使用 render_template 渲染的 admin.html 模板。這裡的關鍵點是，Flask 不會處理這個路由，而是將它交給 Vue 處理。