[Vuejs]-Embedding vue app within server-side framework app. Vue Public Path fails

by

0👍

Found a better solution – disable the HTML generation… its a static file, so make it a template file within the backend app. Build the JS and CSS – specify the asset file names, and have them output to your chosen folder. Most of this config was found in a blog post – however, I can’t remember which one…

vue.config.js

const assetsDir = './../../../assets/static'
// This config disables HTML, and builds static assets
// static assets are stuck in assetsDir.
// assetsDir does NOT filter down - hence we have to add it to each filename
// We give each file a name - this breaks cachebusting (if you use it)
// We create a static html file - which loads our paths
module.exports = {
  assetsDir,
  configureWebpack: {
    output: {
      filename: assetsDir + "/js/my-file.js",
      chunkFilename: assetsDir + "/js/my-file-chunk.js"
    }
  },

  chainWebpack: config => {
    if (config.plugins.has("extract-css")) {
      const extractCSSPlugin = config.plugin("extract-css");
      extractCSSPlugin &&
      extractCSSPlugin.tap(() => [
        {
          filename: assetsDir + "/css/my-file.css",
          chunkFilename: assetsDir + "/css/my-file-chunk.css"
        }
      ]);
    }

    config.plugins
      .delete("html")
      .delete("prefetch")
      .delete("preload");
  }
}

Benefit of this is – at build, your files get dumped into the correct directory. You don’t have to faff about with building html templates, as you just build your server-side template as you normally would. This applies to any integration – not just Phoenix.

Leave a comment