如何配置Vue Cli让chunk类JS文件路径自动添加/static前缀适配Django

你需要的配置项是Vue Cli的publicPath，该参数用于指定应用部署时所有静态资源的基础访问路径，完全匹配你的需求。修改后的vue.config.js配置如下：

module.exports={
  // 新增publicPath配置，区分生产和开发环境
  publicPath: process.env.NODE_ENV === 'production' ? '/static/' : '/',
  pages: {
    'index' : {
      'entry' : './src/pages/home/main.js',
      // 注意原配置这里的template key多了个空格，已修正
      'template' : 'public/index.html',
      'title' : 'Home',
      'chunks' : ['chunk-vendors','chunk-common', 'index']
    },
    'memory' : {
      'entry' : './src/pages/memory/main.js',
      'template' : 'public/index.html',
      'title' : 'Memory',
      'chunks' : ['chunk-vendors','chunk-common', 'memory']
    }
  },
  devServer: {
    disableHostCheck: true
  }
}

配置说明 #

• 上述配置会在执行npm run build生产构建时，自动给所有静态资源（包括chunk类JS文件、CSS、图片等）的引用路径加上/static前缀，生成的HTML中资源引用路径会自动变为/static/js/chunk-vendors.js格式，和Django的静态文件前缀规则完全匹配
• 开发环境保留默认/前缀，不会影响本地调试效果

额外注意 #

你原配置中的template字段名后多了一个多余的空格，已在上述示例中修正，避免出现模板加载失败的异常。

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