Vue CLI Multisite Base Example
Just some stuff I hacked together to get a vue-cli created app to support
multiple sites. Key things to look at compared to a base
vue create <app>
- Customizes the
npm run build commands to support multiple sites, an “admin”
and a “main” site. Each one has a custom dist/ output folder (--dest option)
and a custom entry point (e.g. “./src/admin/index.js” instead of default
- This file needs to be added to a Vue project, as it’s not there by default.
It configures the html-webpack-plugin to change the name of the “public” folder
that gets put into the dist/ folder; so each site can have its own public
- Uses environment variable SITE_NAME to choose the public folder to use.
- custom-public/ is for the admin site and added a “hello.txt” to verify
correct functionality. The main site uses the public/ folder like normal.
So when you run
npm run build-admin it creates
dist-admin/ taking the
custom-public folder and the admin entrypoint.
npm run build-main creates the
dist/ folder and the normal public folder.
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
See Configuration Reference.