130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import { unheadVueComposablesImports } from '@unhead/vue';
|
|
import { VantResolver } from '@vant/auto-import-resolver';
|
|
import Vue from '@vitejs/plugin-vue';
|
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
|
import path from 'node:path';
|
|
import { fileURLToPath, URL } from 'node:url';
|
|
import { pinyin } from 'pinyin-pro';
|
|
import type { GetManualChunk } from 'rollup';
|
|
import UnoCSS from 'unocss/vite';
|
|
import AutoImport from 'unplugin-auto-import/vite';
|
|
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
|
|
import Components from 'unplugin-vue-components/vite';
|
|
import Markdown from 'unplugin-vue-markdown/vite';
|
|
import { getPascalCaseRouteName, VueRouterAutoImports } from 'unplugin-vue-router';
|
|
import VueRouter from 'unplugin-vue-router/vite';
|
|
import { defineConfig, loadEnv } from 'vite';
|
|
import cdnImport from 'vite-plugin-cdn-import';
|
|
import vueDevTools from 'vite-plugin-vue-devtools';
|
|
|
|
// https://vitejs.dev/config/
|
|
export default defineConfig(({ mode, command }) => {
|
|
const isBuild = command === 'build';
|
|
const env = loadEnv(mode, process.cwd());
|
|
|
|
return {
|
|
base: env.VITE_BASE,
|
|
plugins: [
|
|
VueRouter({
|
|
// https://uvr.esm.is/guide/configuration.html
|
|
exclude: ['**/__*', '**/__*/**/*'],
|
|
getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
|
|
logs: false,
|
|
extensions: ['.vue', '.page.vue', '.md'],
|
|
}),
|
|
// other plugins
|
|
AutoImport({
|
|
resolvers: [
|
|
TDesignResolver({
|
|
library: 'mobile-vue',
|
|
esm: true,
|
|
}),
|
|
VantResolver({
|
|
importStyle: true,
|
|
}),
|
|
],
|
|
imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
|
|
}),
|
|
Components({
|
|
// allow auto load markdown components under `./src/components/`
|
|
extensions: ['vue', 'md'],
|
|
// allow auto import and register components used in markdown
|
|
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
|
resolvers: [
|
|
TDesignResolver({
|
|
library: 'mobile-vue',
|
|
esm: true,
|
|
}),
|
|
VantResolver({
|
|
importStyle: true,
|
|
}),
|
|
],
|
|
}),
|
|
UnoCSS(),
|
|
Vue({
|
|
include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
|
|
}),
|
|
vueJsx(),
|
|
Markdown({
|
|
headEnabled: true,
|
|
}),
|
|
vueDevTools(),
|
|
cdnImport({
|
|
// https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
|
|
modules: ['vue'],
|
|
prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
|
|
enableInDevMode: true,
|
|
}),
|
|
],
|
|
define: {
|
|
$__DEV__: JSON.stringify(!isBuild),
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
},
|
|
},
|
|
build: {
|
|
sourcemap: mode !== 'production' || env.VITE_SOURCE_MAP === 'true',
|
|
rollupOptions: {
|
|
output: {
|
|
// chunkFileNames: 'assets/chunk/[name]_[hash].js',
|
|
// entryFileNames: 'assets/entry/[name]_[hash].js',
|
|
// assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
|
|
manualChunks: env.VITE_SPLIT_CHUNKS ? createSplitChunk() : undefined,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
// packages/vite/src/node/plugins/splitVendorChunk.ts
|
|
function createSplitChunk(): GetManualChunk {
|
|
return (id /* , { getModuleIds, getModuleInfo } */) => {
|
|
if (isInNodeModules(id) /* && !isCSSRequest(id) */) {
|
|
let pkgName = id;
|
|
pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
|
|
pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
|
|
pkgName = pkgName.startsWith('@') ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1] : pkgName.split('/')[0];
|
|
|
|
if (pkgName.startsWith('@vue/') /* || pkgName === 'vue-demi' */) pkgName = 'vue';
|
|
/* if (pkgName.includes('vue-router')) pkgName = 'vue-router'; */
|
|
|
|
return `libs/${pkgName}`;
|
|
} else if (id.includes('src/pages')) {
|
|
let fileName = path
|
|
.basename(id)
|
|
.split('?')[0]
|
|
.replace(/\.\w+$/, '');
|
|
fileName = pinyin(fileName, { type: 'array' }).join('');
|
|
return `pages/${fileName}`;
|
|
}
|
|
};
|
|
}
|
|
|
|
function isInNodeModules(id: string): boolean {
|
|
return id.includes('node_modules');
|
|
}
|
|
/* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
|
|
const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */
|