vue + elementUI + Flask配置

版本信息

@vue-cli 4.2
elementUI 2.13.0

注意事项

@vue-cli 4.2 少了很多配置文件, 只有一个babel.config.js和包版本文件.

elementUI 按需引入

配置babel.config.js

module.exports = {
  'presets': [
    '@vue/app',
    ['@babel/preset-env', { 'modules': false }]
  ],
  'plugins': [['component', // 删掉[]
    {
      'libraryName': 'element-ui',
      'styleLibraryName': 'theme-chalk'
    }
  ]]
}

创建element.js 编写需要引入的组件

import Vue from 'vue'
import { MessageBox, Message, Loading, Form, FormItem, Input, Button, Image, Icon } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// Vue Element 组件 初始化 按需加载
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Image)
Vue.use(Icon)
Vue.use(Loading.directive)

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message

路由配置router/index.js, 懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: resolve => require(['@/views/login/login'], resolve),
      type: 1
    },
    {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/views/home/home'], resolve),
      type: 1
    },
    {
      path: '/service',
      name: 'service',
      component: resolve => require(['@/views/service/service'], resolve),
      type: 1
    },
    {
      path: '/project',
      name: 'project',
      component: resolve => require(['@/views/project/project'], resolve),
      type: 1
    },
    {
      path: '/func',
      name: 'func',
      component: resolve => require(['@/views/func/func'], resolve),
      type: 1
    }
  ]
})

const whiteList = ['/login']// 免登录白名单
router.beforeEach((to, from, next) => {
  // to 想要去哪里
  // from 从哪里来
  // next 跳转到哪里
  if (sessionStorage.getItem('isLogin') === 'true') { // determine if there has token
    /* has token*/
    if (to.path === '/login' || to.path === '/') {
      next({ path: '/home' })
    } else {
      next()
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
    }
  }
})

export default router

在main.js加载

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import './plugins/element'
import { get, post } from './http/request'

Vue.config.productionTip = false
Vue.prototype.$get = get
Vue.prototype.$post = post

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

路由去除#号

router里开启 mode: ‘history’ 模式

部署到Python Flask后台

• 设置打包文件夹

创建vue.config.js配置打包

module.exports = {

  outputDir: 'dist',

  assetsDir: 'static',

  filenameHashing: true
}

把css/img/js文件存放到static文件夹

• Python后台设置HTML文件夹为static

app = Flask(__name__, template_folder="../static", static_folder="../static")

把Vue打包文件放到Python的static目录, 如下

编写跳转页面路由

from flask import render_template

@app.route('/')
def index():
    return render_template('index.html')

• 路由模式改为History后, 前端刷新404问题解决

修改跳转页面路由

from flask import render_template

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