136 lines
3.4 KiB
TypeScript
136 lines
3.4 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
import Components from 'unplugin-vue-components/vite'
|
|
import AutoImport from 'unplugin-auto-import/vite'
|
|
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
|
|
import path from 'path'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
vue({
|
|
template: { transformAssetUrls }
|
|
}),
|
|
|
|
quasar({
|
|
// sassVariables: 'src/assets/styles/quasar-variables.sass'
|
|
}),
|
|
|
|
Components({
|
|
resolvers: [
|
|
(componentName) => {
|
|
if (componentName.startsWith('Q'))
|
|
return { name: componentName, from: 'quasar' }
|
|
}
|
|
],
|
|
dts: true,
|
|
dirs: ['src/components'],
|
|
extensions: ['vue'],
|
|
deep: true
|
|
}),
|
|
|
|
AutoImport({
|
|
imports: [
|
|
'vue',
|
|
'vue-router',
|
|
'pinia',
|
|
{
|
|
'quasar': ['useQuasar', '$q', 'Notify', 'Loading', 'Dialog'],
|
|
'@vueuse/core': ['useLocalStorage', 'useSessionStorage', 'useFetch']
|
|
}
|
|
],
|
|
dts: true,
|
|
dirs: ['src/composables', 'src/stores'],
|
|
vueTemplate: true
|
|
}),
|
|
|
|
VitePWA({
|
|
registerType: 'autoUpdate',
|
|
workbox: {
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
|
runtimeCaching: [
|
|
{
|
|
urlPattern: /^https:\/\/api\.dramaling\.com\/.*/i,
|
|
handler: 'NetworkFirst',
|
|
options: {
|
|
cacheName: 'api-cache',
|
|
expiration: {
|
|
maxEntries: 50,
|
|
maxAgeSeconds: 5 * 60
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
manifest: {
|
|
name: 'Drama Ling - AI語言學習',
|
|
short_name: 'Drama Ling',
|
|
description: 'AI驅動的情境式語言學習應用',
|
|
theme_color: '#00E5CC',
|
|
background_color: '#2C3E50',
|
|
display: 'standalone',
|
|
orientation: 'portrait-primary',
|
|
scope: '/',
|
|
start_url: '/',
|
|
icons: [
|
|
{
|
|
src: '/icons/icon-192x192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: '/icons/icon-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png'
|
|
}
|
|
]
|
|
}
|
|
})
|
|
],
|
|
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(__dirname, 'src'),
|
|
'~': path.resolve(__dirname, 'src'),
|
|
'@components': path.resolve(__dirname, 'src/components'),
|
|
'@modules': path.resolve(__dirname, 'src/modules'),
|
|
'@stores': path.resolve(__dirname, 'src/stores'),
|
|
'@services': path.resolve(__dirname, 'src/services'),
|
|
'@utils': path.resolve(__dirname, 'src/utils'),
|
|
'@assets': path.resolve(__dirname, 'src/assets')
|
|
}
|
|
},
|
|
|
|
css: {
|
|
preprocessorOptions: {
|
|
scss: {
|
|
additionalData: `@import "@/assets/styles/variables.scss";`
|
|
}
|
|
}
|
|
},
|
|
|
|
build: {
|
|
target: 'es2020',
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
'vue-vendor': ['vue', 'vue-router', 'pinia'],
|
|
'quasar-vendor': ['quasar'],
|
|
'utils-vendor': ['axios', 'lodash-es', 'dayjs', '@vueuse/core'],
|
|
'validation-vendor': ['vee-validate', 'yup']
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port: 3000,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:5000',
|
|
changeOrigin: true
|
|
}
|
|
}
|
|
}
|
|
}) |