import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import postcssPxToViewport from 'postcss-px-to-viewport'
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ["vue"],
dts: "src/auto-import.d.ts",
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
css: {
postcss: {
plugins: [
postcssPxToViewport({
viewportWidth: 1920
})
]
}
},
build: {
minify: "terser",
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"comp": resolve(__dirname, "src/components"),
"/img": "./src/assets",
},
},
server: {
host: "0.0.0.0",
hmr: true,
strictPort: false,
proxy: {
"/api": {
target: "",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
vite常用基本配置
{
root: process.cwd(),
base: '/',
mode: 'development',
plugins: [vue()],
publicDir: 'public',
cacheDir: 'node_modules/.vite',
resolve: {
alias: [
{
find: /\/@\//,
replacement: pathResolve('src') + '/'
}
],
dedupe: [],
conditions: [],
mainFields: [],
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
preserveSymlinks: false,
},
css: {
modules: {
scopeBehaviour: 'global' | 'local',
},
postcss: '',
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`
}
}
},
json: {
namedExports: true,
stringify: false,
},
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment'
},
assetsInclude: ['**/*.gltf'],
logLevel: 'info',
clearScreen: true,
envDir: '/',
envPrefix: [],
server: {
host: '127.0.0.1',
port: 5000,
strictPort: true,
https: false,
open: true,
proxy: {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true,
force: true,
hmr: {
},
watch: {
},
middlewareMode: '',
fs: {
strict: true,
allow: [],
deny: ['.env', '.env.*', '*.{pem,crt}'],
},
origin: 'http://127.0.0.1:8080/',
},
build: {
target: ['modules'],
polyfillModulePreload: true,
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: '4096',
cssCodeSplit: true,
cssTarget: '',
sourcemap: false,
rollupOptions: {},
lib: {},
manifest: false,
ssrManifest: false,
ssr: undefined,
minify: 'esbuild',
terserOptions: {},
write: true,
emptyOutDir: true,
brotliSize: true,
chunkSizeWarningLimit: 500,
watch: null,
},
preview: {
port: 5000,
strictPort: true,
https: false,
open: true,
proxy: {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true,
},
optimizeDeps: {
entries: [],
exclude: [],
include: [],
keepNames: false,
},
ssr: {
external: [],
noExternal: '',
target: 'node',
}
}