Vue3 Vite应用部署至Flask服务器仅显导航栏且无报错求助

问题说明 #

我正在学习Vue3，开发一个Vue前端搭配Flask后端的应用，通过TMDB API展示电影列表。开发环境执行npm run dev可正常运行，能显示导航栏及API返回的电影列表；但部署到Flask的static文件夹后，仅显示导航栏，无其他内容且控制台无报错。

部署流程：

• 执行npm run build生成dist文件
• 将dist内所有文件复制到Flask应用的static文件夹
• 修改index.html中的资源URL，确保js和css能正确加载
• 启动Flask服务器，访问http://127.0.0.1:5000/static/index.html

排查与解决方法 #

1. 调整Vue路由模式 #

若Vue使用了history模式，直接访问static下的index.html会导致路由匹配失败。改成hash模式即可：
在Vue项目的router/index.js中修改：

const router = createRouter({
  history: createWebHashHistory(), // 替换原有的createWebHistory()
  routes: [...]
})

修改后重新执行npm run build并重新部署。

2. 配置Vue资源基础路径 #

手动修改index.html容易出错，直接在Vue项目的配置文件中设置base路径：
如果是Vite项目，修改vite.config.js：

export default defineConfig({
  base: '/static/', // 对应Flask的static目录路径
  // 其他配置项...
})

如果是Vue CLI项目，修改vue.config.js：

module.exports = {
  publicPath: '/static/'
}

重新build后，生成的资源路径会自动带上/static/，无需手动修改index.html。

3. 调整Flask路由配置 #

不要直接访问/static/index.html，在Flask中配置根路由返回index.html：

from flask import Flask, render_template

app = Flask(__name__, static_folder='static', template_folder='static')

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

之后访问http://127.0.0.1:5000/，确保Vue路由和资源加载逻辑正常。

4. 检查TMDB API请求问题 #

• 跨域问题：开发环境可能配置了代理，但部署后直接请求TMDB API会触发跨域。在Flask中添加代理路由：

  import requests
  from flask import jsonify
  
  @app.route('/api/popular-movies')
  def get_popular_movies():
      tmdb_api_url = 'https://api.themoviedb.org/3/movie/popular'
      params = {
          'api_key': '你的TMDB密钥',
          'language': 'zh-CN'
      }
      response = requests.get(tmdb_api_url, params=params)
      return jsonify(response.json())
  

  然后将Vue中的API请求地址改为/api/popular-movies。
• 请求路径错误：检查浏览器Network面板，确认API请求的URL是否正确，是否返回了预期数据。

内容的提问来源于stack exchange，提问作者Karthik Sankaran