Question

我正在尝试使用Flask蓝图来提供多页Web应用程序。 Webapp结构：

着陆页html->登录-> Vuejs SPA

烧瓶结构：

app/
    client/
        dist/
            static/
                js/
                css/
            vue_index.html
        client.py
    main/
        main.py
    static/
        index.html
    __init__.py

__ init_.py

app.register_blueprint(main_bp)
app.register_blueprint(client_bp)

client.py

client_bp = Blueprint('client', __name__,
                  url_prefix='/client',
                  static_url_path='/client/static',
                  static_folder='dist/static',
                  template_folder='dist',
                  )

@client_bp.route('/')
def client():
    dist_dir = current_app.config['DIST_DIR'] #full path to dist folder
    entry = os.path.join(dist_dir, 'vue_index.html')
    return send_file(entry)

vue_index.html

<!DOCTYPE html><html>...<script src=/static/js/index.js></script></body></html>

然后我运行该应用程序并重定向到host：port / client，找到了vue_index.html，但是找不到该文件中引用的.js文件。

但是，当我将js /文件夹从app / client / dist / static移至app / static时，vue_index.html文件可以将js代码定位为ok。

因此很明显，该蓝图并未覆盖flask应用程序的静态路径。关于如何调试静态路径/解决此问题的任何想法？

Answer 1

将send_file替换为render_template：https://flask.palletsprojects.com/en/1.1.x/quickstart/#rendering-templates

from flask import render_template

# .....

@client_bp.route('/')
def client():
    return render_template('vue_index.html')

对于client_bp，请使用static_url_path='static'，因为在/client/static的情况下，您将创建一个额外的嵌套
更新您的webpack配置，以使用/client命名空间将公共URL路径更改为JS文件：

<!DOCTYPE html><html>...<script src=/client/static/js/index.js></script></body></html>

无论如何，我建议您对静态文件和模板使用不同的非嵌套文件夹

Answer 2

通过将所有flask静态文件和模板放在新的dist /文件夹中，并将所有vuejs文件添加到此文件夹中，例如

  row_ix = 0
  summary.each do |row|
    col_ix = 0
    row.each do |row_to_col_amt|
      if row_ix == col_ix
        col_ix += 1
        next
      end
      col_to_row_amt = summary[col_ix][row_ix]
      if row_to_col_amt >  col_to_row_amt
        summary[row_ix][col_ix] -= col_to_row_amt
        summary[col_ix][row_ix] = 0
      elsif row_to_col_amt <  col_to_row_amt
        summary[col_ix][row_ix] -= row_to_col_amt
        summary[row_ix][col_ix] = 0
      else
        summary[row_ix][col_ix] = 0
        summary[col_ix][row_ix] = 0
      end
      col_ix += 1
    end
    row_ix += 1
  end

然后运行该应用程序：

webapp/
    dist/
        js/ (vuejs files)
        css/ (vuejs and flask landing page .css)
        index.html (vuejs entry)
        other.html (flask misc webpage)

这不是理想的选择（我想自己保留dist中的vuejs文件，并具有静态和模板文件夹，但无法正常工作）

烧瓶蓝图无法覆盖静态路径

2 个答案: