Vue CLI 3 SPA in Subfolder, Static HTML Pages in Root

Question

Using Vue CLI 3 how can I create a project that contains some static html files at the root of the public directory and an SPA inside of an app folder?

I'd like several static html files including an index.html at the root of the project. I want these static HTML files served outside of the SPA for SEO purposes.

Right now, my project structure looks like this:

.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── app
│   │   └── index.html
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js
└── yarn.lock

I've tried many different combinations of publicPath and indexPath values in my vue.config.js file. None have achieved what I'm hoping for. I'd like yarn serve to serve both the static HTML files and SPA locally for development. More importantly, I'd like the static HTML files and the SPA properly bundled into the dist folder when I run yarn build. I haven't been able to achieve either goal.

With the configuration below, the public/index.html file that's meant to be static and only displaying at / is being served at both http://localhost:8080/ and http://localhost:8080/app/. Interestingly, at http://localhost:8080/app/ the js resources are being injected into the response along with what's meant to be static HTML.

After running yarn build with the config below I'm left with a /dist/app/index.html file that has the static index.html file code with no javascript injected instead of the SPA code with javascript injected. The /dist/index.html file has the static HTML I expect but all the javascript that's meant for the SPA is injected.

// vue.config.js
module.exports = {
    publicPath: '/app/',
    indexPath: 'index.html'
}

How can I configure this project to support static html files at the project root and an SPA in the app folder?

I think for SEO purposes you have to use NuxtJS that will provide your component as HTML files. — Kushal Suthar
– Kushal Suthar, Commented Jan 7, 2020 at 7:24
@KushalSuthar I considered using NuxtJS but that seems like overkill for the few pages where I care about SEO. The multipage apps option in the accepted answer works really well. — Anthony Jack
– Anthony Jack, Commented Jan 7, 2020 at 23:36

Michal Levý · Accepted Answer · 2020-01-07 12:49:13Z

2

You can leverage the feature of Vue CLI to build multipage apps and actually have only one page...

// vue.config.js
module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: "src/main.js",
      // the source template
      template: "public/app/index.html",
      // output as dist/app/index.html
      filename: "app/index.html",
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: "App Index Page",
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  }
};

edited Jan 7, 2020 at 12:49

answered Jan 7, 2020 at 11:46

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shivaramanaiyer Over a year ago

Thank you so much for this. I am not sure why this isn't a default thing for nested paths support

Collectives™ on Stack Overflow

Vue CLI 3 SPA in Subfolder, Static HTML Pages in Root

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related