最终制作了2个路由器router.js
and router-dev.js
以及包含其中之一的别名
vite.config.js
:
import { defineConfig } from 'vite'
import { resolve as resolver } from 'path'
import vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'
const resolve = {
development: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
'@': resolver(__dirname, './src'),
'@dynarouter': resolver(__dirname, './src/router-dev.js')
}
},
production: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
'@': resolver(__dirname, './src'),
'@dynarouter': resolver(__dirname, './src/router.js')
}
}
}
const plugins = [
vue(),
ViteComponents({
dirs: ['src/shared/components'],
extensions: ['vue'],
deep: true,
}),
]
const build = {
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: '4096',
cssCodeSplit: false, // single CSS
sourcemap: false,
manifest: false,
chunkSizeWarningLimit: 1000,
rollupOptions: {}
}
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
return {
// serve specific config
plugins,
resolve: resolve.development,
}
} else {
return {
// build specific config
plugins,
resolve: resolve.production,
build,
}
}
})
main.js
:
import { createApp } from 'vue'
import App from '@/App.vue'
// import router from '@/router-dev.js'
// import router from '@/router.js'
import router from '@dynarouter'
import global from '@/global.js'
import store from '@/shared/stores'
import click from '@/shared/directives/clickOutside.js'
const app = createApp(App)
.use(router)
.use(store)
.directive('click-outside', click)
app.config.devtools = true
app.mount('#app')