vue项目集成到flask和django项目展示

const config = require('./src/config/env');

const { resolve } = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')

//publicPath需要根据线上环境来具体修改
// /表示网站的根目录 线上环境可能是/static/
const publicPath = '/static/'

module.exports = (options = {}) => ({
  //webpack-dev-server -d --inline --hot --env.dev
  //options.dev 是在执行npm run dev调用webpack命令的时候传递过来的
  entry: {
    // vendor: './src/vendor',
    index: './src/main.js'
  },
  output: {
    //__dirname表示项目的根目录
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]',
    //src="https://blog.51cto.com/yxh1990/..../index.js?be5
    //publicPath的作用是在编译后的html中引入资源文件时候在最前面添加的路径
    publicPath: options.dev ? '/assets/' : publicPath
  },
  module: {
    rules: [{
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            root: resolve(__dirname, 'src'),
            attrs: ['img:src', 'link:href']
          }
        }]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /favicon\.png$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?. )?$/,
        exclude: /favicon\.png$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      //被多次引用的模块自动提取并生成指定名称的文件
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      //把编译后的js文件引入到template指定的html文件中
      template: 'src/index.html'
    })
  ],
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    }
  },
  //shift 右键 => 快速在当前目录打开cmd窗口
  //webpack-dev-server -d --inline --hot --env.dev
  devServer: {
    host: '0.0.0.0',  //webpack启动的服务器IP
    port: 8090,       //webpack启动web服务占用的端口
    proxy: {
      '/api/': {  
       //把js中请求url中字符串到/api/结尾的字符串替换成http://127.0.0.1:3000
        target: config.apiServer,
        changeOrigin: true
        // pathRewrite: {
        //   '^/api': ''
        // }
        //要不要pathRewrite需要根据后台项目设置的接口地址来确定
      }
    },
    historyApiFallback: {
      index: url.parse(options.dev ? '/assets/' : publicPath).pathname
    }
  },
  devtool: options.dev ? '#eval-source-map' : '#source-map'
})

const publicPath = '/static/' 
    devServer: {
      host: '0.0.0.0',
      port: 8080,
      proxy: {
        '/api/': {
              target: config.apiServer,
              changeOrigin: true
              // pathRewrite: {
                 //   '^/api': ' '
            // }
          }
     }

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
import config


app = Flask(__name__)

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

app.config.from_object(config)
db = SQLAlchemy(app)

def auth_middleware():
    if request.path == '/api/account/users/login/' or request.path.startswith('/api/apis/configs/') \
            or request.path.startswith('/api/apis/files/') or "static" in request.path or "favicon.ico" in request.path or "/" == request.path:
        return None
    token = request.headers.get('X-TOKEN')
    if token and len(token) == 32:
        g.user = User.query.filter_by(access_token=token).first()
        if g.user and g.user.is_active and g.user.token_expired >= time.time():
            g.user.token_expired = time.time()   8 * 60 * 60
            g.user.save()
            return None
    return json_response(message='Auth fail, please login'), 401

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
LOGIN_URL = '/portals/login/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

urlpatterns = [
    # portal login
    path('register/', user.register, name='register'),
    path('login/', user.login, name='login')
]

def login(request):

    ok = check_if_initailized()
    if not ok:
        initial_platform_env()

    if request.user.is_authenticated:
        return HttpResponseRedirect('/')

    if request.method == "GET":
        form = JadeLoginForm(request)
        return render(request, 'portals/index.html', locals())