100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { VantResolver } from '@vant/auto-import-resolver';
|
||
import vue from '@vitejs/plugin-vue';
|
||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||
import autoprefixer from 'autoprefixer';
|
||
import { resolve } from 'path';
|
||
import postcssPxtorem from 'postcss-pxtorem';
|
||
import tailwindcss from 'tailwindcss';
|
||
import AutoImport from 'unplugin-auto-import/vite';
|
||
import Components from 'unplugin-vue-components/vite';
|
||
import { defineConfig } from 'vite';
|
||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
||
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
|
||
import svgLoader from 'vite-svg-loader';
|
||
|
||
export default defineConfig({
|
||
base: '/mobile/',
|
||
plugins: [
|
||
vue(),
|
||
vueJsx(),
|
||
vueSetupExtend(),
|
||
svgLoader({ svgoConfig: {} }),
|
||
createSvgIconsPlugin({
|
||
// 指定需要缓存的图标文件夹
|
||
iconDirs: [resolve(process.cwd(), 'src/assets/svg'), resolve(process.cwd(), 'public/images')], // 与本地储存地址一致
|
||
// 指定symbolId格式
|
||
symbolId: 'icon-[name]',
|
||
}),
|
||
AutoImport({
|
||
dts: 'src/auto-import.d.ts',
|
||
include: [
|
||
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
|
||
/\.vue$/,
|
||
/\.vue\?vue/, // .vue
|
||
],
|
||
imports: ['vue'],
|
||
resolvers: [VantResolver()],
|
||
eslintrc: {
|
||
enabled: true,
|
||
},
|
||
}),
|
||
Components({
|
||
resolvers: [VantResolver()],
|
||
}),
|
||
],
|
||
resolve: {
|
||
alias: [
|
||
{
|
||
find: '@locale',
|
||
replacement: resolve(__dirname, '../src/locale'),
|
||
},
|
||
{
|
||
find: '@',
|
||
replacement: resolve(__dirname, '../src'),
|
||
},
|
||
{
|
||
find: 'vue-i18n',
|
||
replacement: 'vue-i18n/dist/vue-i18n.esm-bundler.js', // 解决 vue-i18n 依赖包报错
|
||
},
|
||
{
|
||
find: 'vue',
|
||
replacement: 'vue/dist/vue.esm-bundler.js', // compile template
|
||
},
|
||
],
|
||
extensions: ['.ts', '.js', '.jsx', '.tsx', '.json', '.vue', '.mjs'],
|
||
},
|
||
define: {
|
||
'process.env': {},
|
||
// 定义特性标志
|
||
'__VUE_OPTIONS_API__': true,
|
||
'__VUE_PROD_DEVTOOLS__': false,
|
||
// 设置hydration不匹配详细信息的标志
|
||
'__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': true,
|
||
},
|
||
css: {
|
||
postcss: {
|
||
plugins: [
|
||
postcssPxtorem({
|
||
rootValue: 14, // 基准值，1rem
|
||
propList: ['*'], // 需要转换的属性，`*` 表示所有属性都转换
|
||
unitPrecision: 5, // 转换后保留的小数位数
|
||
selectorBlackList: ['.no-rem'], // 忽略的选择器，例如 `.no-rem` 类名的样式不会被转换
|
||
replace: true, // 替换规则，而不是添加回退
|
||
mediaQuery: false, // 是否允许在媒体查询中转换
|
||
minPixelValue: 2, // 小于或等于 2px 的值不转换为 rem
|
||
}),
|
||
tailwindcss(),
|
||
autoprefixer(),
|
||
],
|
||
},
|
||
preprocessorOptions: {
|
||
less: {
|
||
modifyVars: {
|
||
hack: `true; @import (reference) "${resolve('src/assets/style/var.less')}";`,
|
||
},
|
||
javascriptEnabled: true,
|
||
},
|
||
},
|
||
},
|
||
});
|