More assets configuration options

[ghenry]

What problem does this feature solve?

Setting a custom path for where static files are requested with index.html static file.

It's time to deploy my migrated vue cli 2 to vue cli 3 SPA. I want to put the static files in ../../static but also have the assets served up from href="/static/js/app.a7as86ad8.js" etc. See https://forum.vuejs.org/t/baseurl-at-but-files-within-index-html-to-be-served-at-static/45777/4

On vue cli 2, I had:

build: {
...

// Paths
assetsRoot: path.resolve(__dirname, '../../../'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

so my SPA lives at app.example.com but within index.html files were served at /static/js and /static/css etc.

What does the proposed API look like?

Allow control over asset paths used in index.html in vue.config.js

[LinusBorg]

The Vue-cli 3.0 equivalent for the assetsPublicPath of the 2.0 webpack template is the baseUrl option in 3.0

Did you try that? The forum thread doesn't indicate it.

[ghenry]

Hi Thor sten, That would work but the docs state it will affect history mode, which I use. Like I mentioned, this lives at the base url default of /. I can't see any other way. Thanks.

[LinusBorg]

That would work but the docs state it will affect history mode,

That's not exactly what it states - the warning about history mode is about relative baseURL values only.

You should be able to adjust the base option of router manually to / (it's set to process.env.BASE_URL by default)

[ghenry]

Thanks. This works and I already had base in router set to what I wanted anyway:

// SureVoIP configs - GH
module.exports = {
  devServer: {
    port: 8081,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  baseUrl: "/static/", // just used within index.tt and asset serving within
  outputDir: "../../static",
  indexPath: "../src/client_side/index.tt" // keep in root/src/
}

// SureVoIP common things - GH
const GitRevisionPlugin = require("git-revision-webpack-plugin")
const git = new GitRevisionPlugin({ versionCommand: "rev-parse --short HEAD" })

process.env.VUE_APP_COPYRIGHT = require("./package.json").copyright
process.env.VUE_APP_COMPANY = require("./package.json").company
process.env.VUE_APP_DESCRIPTION = require("./package.json").description
process.env.VUE_APP_VERSION = require("./package.json").version
process.env.VUE_APP_GIT_REV = git.version()

its doesn't feel to clunky. I do feel some docs update for your first comment would be good re assetsPublicPath

Thanks for your time to help.

[ghenry]

Morning. This has actually had an impact with routing for some reason with npm run serve (and probably in prod too as this isn't live yet). My / base alias stopped working for /dashboard, i.e. when I and my test visits "/" :

const router = new VueRouter({
  mode: "history",
  base: "/", // we live at https://portal.surevoip.co.uk/
  linkActiveClass: "active",
  routes: [
    {
      path: "/",
      name: "Container",
      component: Container,
      children: [
        {
          path: "/user/profile",
          name: "UserProfile",
          component: UserProfile,
          meta: { requireRole: false }
        },
        {
          path: "/settings",
          name: "Settings",
          component: Settings,
          meta: { requireRole: true, requiredRoles: ["admin"] }
        },
        {
          path: "/about",
          name: "About",
          component: About,
          meta: { requireRole: false }
        },
        {
          path: "/basket",
          name: "ShoppingBasket",
          component: ShoppingBasket,
          meta: { requireRole: true, requiredRoles: ["admin"] }
        },
        {
          path: "/dashboard",
          name: "Dashboard",
          component: Dashboard,
          alias: "/",
          meta: { requireRole: true, requiredRoles: ["admin", "dashboard"] }
        },
        <snip>

removing baseUrl from vue.config.js below and it works again, so where else is baseUrl used?

// SureVoIP configs - GH
module.exports = {
  devServer: {
    port: 8081,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  baseUrl: "/static/", // just used within index.tt and asset serving within
  outputDir: "../../static",
  indexPath: "../src/client_side/index.tt" // keep in root/src/
}

Thanks.

[LinusBorg]

My / base alias stopped working for /dashboard, i.e. when I and my test visits "/" :

What does "stopped working" mean in that context? What is expected, and what happens instead?

Can you share some kind of runnable reproduction?

[ghenry]

Hi, in that the Dashboard component is no longer displayed unless you navigate to /dashboard, whereas the alias statement presented the Dashboard when visiting /.

[ghenry]

I'll confirm my public/index.html base url vars etc. and report back. Probably typos or missing things.

[ghenry]

Can't reproduce. Closing. Thanks!