Test using vue-cli configured to hold multiple distinct websites with their own public folder and entry points.
 
 
 
Go to file
Noah 5c50414766 Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
custom-public Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
public Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
src Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
.gitignore init 2020-01-28 14:22:56 -08:00
README.md Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
babel.config.js init 2020-01-28 14:22:56 -08:00
package-lock.json init 2020-01-28 14:22:56 -08:00
package.json Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00
vue.config.js Multi-vue-site example initial commit 2020-01-28 14:53:49 -08:00

README.md

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> site:

  • package.json:
    • 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 "./src/main.js")
  • vue.config.js:
    • 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 folder.
    • 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.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.