It's simple just create file vue.config.js in ROOT folder of project.
Its very important file. it's on top of vue project.
People usualy use more than one page in old fasion style.
vue.config.js is right place to define main dependency pages.
I used to create main sigle-page app (pwa) but i also need
some other pages. Like error pages or google verify for example.
You can change dev server port , sourceMap enable/disable or PWA configuration...
module.exports = {
pages: {
'index': {
entry: './src/main.ts',
template: 'public/index.html',
title: 'Welcome to my vue generator project',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
'bad': {
entry: './src/error-instance.ts',
template: 'public/bad.html',
title: 'Error page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
/* Disabled - Only one time
'googleVerify': {
entry: './src/error-instance.ts',
template: 'public/somelink.html',
title: 'Error page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
*/
},
devServer: {
'port': 3000
},
css: {
sourceMap: false
},
pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
},
}
For this config here's main instance file:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App, {
props: { error: 'You can not search for assets...' }
}),
}).$mount('#error')