将 Flask 与 Nuxtjs 结合进行 SSR

Question

我正在开发一个通用应用程序，前端和后端分离，使用 Flask 作为 API，Nuxtjs 作为前端。在尝试 Nuxtjs 之前，我只使用 vuejs (SPA)，但后来我意识到它没有针对 SEO 进行优化。无论如何，我能够在使用构建模式（静态和index.html）时使用生成的dist 文件。我可以使用以下代码来处理它：

app = Flask(__name__, template_folder = "../frontend/dist")
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route('/static/js/<filename>')
def send_js(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/js', filename)

@app.route('/static/css/<filename>')
def send_css(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/css', filename)

@app.route('/static/fonts/<filename>')
def send_img(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/fonts', filename)

@app.route('/static/img/<filename>')
def send_statics(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/img', filename)

@app.route('/statics/icons/<filename>')
def send_icons(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/statics/icons', filename)


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

然而，当我开始使用Nuxtjs时，构建模式生成不同的文件（没有index.html，没有静态文件夹），我不知道如何处理它。您可以在下面的屏幕截图中找到它生成的内容： 生成的文件

Answer 1

如果您想将 Nuxt 应用程序生成到静态网站，则必须在nuxt.config.js文件中更改此设置：

{
  target: 'static'
}

默认情况下，Nuxt 将所有文件生成到/dist文件夹中，当您设置静态模式时，dist 文件夹如下所示：

/dist
  /_nuxt       --- Core functionality: JS and CSS files go here
  /images      --- All images stored into /static/images folder
  /your-page-1 --- Contains one HTML file (If /pages/your-page-1.vue exists)
  index.html   --- Your main html file
  404.html     --- Default error page for 404

默认情况下不会生成 404 页面，因此如果要生成它，必须将此配置设置到nuxt.config.js文件中：

/dist
  /_nuxt       --- Core functionality: JS and CSS files go here
  /images      --- All images stored into /static/images folder
  /your-page-1 --- Contains one HTML file (If /pages/your-page-1.vue exists)
  index.html   --- Your main html file
  404.html     --- Default error page for 404

如果需要重命名生成的文件，请将此配置添加到 nuxt.config.js 文件中：

{
  generate: {
    fallback: true
  }
}