建立配置文件
在根目录下面建立一个vite.config.js文件，在里面导出一个对象或者是一个函数返回一个对象都可以，例如下下面：
export default {配置1：'',配置2: '',}
或者：
export default () => {配置1：'',配置2: '',}
个人常用的配置文件
const path = require('path')export default function () {return {// 代理，最重要，其他的都可以有默认配置proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,}},// 项目启动的根路径root: 'G:\\work\\myself\\studyNode\\nodeMysql\\client',// 入口entry: 'index.html',// 出口outDir: './../public',// 打包后的跟路径base:'/',// 输出的静态资源的文件夹名称assetsDir:'assets',// 是否开启ssr服务断渲染ssr: false,// 重命名路径 path.resolve(__dirname, './src')alias : {'/@/': path.resolve(__dirname, './src')},// 端口port: 3002,// 是否自动开启浏览器open: false,// 开启控制台输出日志silent: false,// 哪个第三方的包需要重新编译optimizeDeps:[],}}
个人好几把刀理解配置详情如下
/*** Entry. Use this to specify a js entry file in use cases where an* `index.html` does not exist (e.g. serving vite assets from a different host)* @default 'index.html'* 入口*/entry: string/*** Base public path when served in production.* @default '/'* 根路径 默认是'/'*/base: string/*** Directory relative from `root` where build output will be placed. If the* directory exists, it will be removed before the build.* @default 'dist'* 输出的默认目录*/outDir: string/*** Directory relative from `outDir` where the built js/css/image assets will* be placed.* @default '_assets'* 静态资源目录*/assetsDir: string/*** Static asset files smaller than this number (in bytes) will be inlined as* base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.* @default 4096* 每个静态资源的最小大小 默认 4096字节*/assetsInlineLimit: number/*** Whether to code-split CSS. When enabled, CSS in async chunks will be* inlined as strings in the chunk and inserted via dynamically created* style tags when the chunk is loaded.* @default true* 默认开启css分隔*/cssCodeSplit: boolean/*** Whether to generate sourcemap* @default false* 是否开启siurcemap*/sourcemap: boolean | 'inline'/*** Set to `false` to disable minification, or specify the minifier to use.* Available options are 'terser' or 'esbuild'.* @default 'terser'*/minify: boolean | 'terser' | 'esbuild'/*** The option for `terser`*/terserOptions: RollupTerserOptions/*** Transpile target for esbuild.* @default 'es'* es构建的目标*/esbuildTarget: string/*** Build for server-side rendering, only as a CLI flag* for programmatic usage, use `ssrBuild` directly.* @internal* 是否开始ssr服务断渲染*/ssr?: boolean// The following are API / config only and not documented in the CLI. --------/*** Will be passed to rollup.rollup()** /guide/en/#big-list-of-options* 由于vite的打包使用的是rollup 所以该配置是rollup的输入配置*/rollupInputOptions: ViteRollupInputOptions/*** Will be passed to bundle.generate()** /guide/en/#big-list-of-options* 该配置是rollup的输出配置*/rollupOutputOptions: RollupOutputOptions/*** Will be passed to rollup-plugin-vue** /vuejs/rollup-plugin-vue/blob/next/src/index.ts*/rollupPluginVueOptions: Partial<RollupPluginVueOptions>/*** Will be passed to @rollup/plugin-node-resolve* /rollup/plugins/tree/master/packages/node-resolve#dedupe*/rollupDedupe: string[]/*** Whether to log asset info to console* @default false* 是否开启日志在控制台的输出， 默认为false*/silent: boolean/*** Whether to write bundle to disk* @default true* 是否将打包好的bundle写入磁盘，默认为true*/write: boolean/*** Whether to emit index.html* @default true* 是否需要打包出index.html文件*/emitIndex: boolean/*** Whether to emit assets other than JavaScript* @default true* 是否打包分出除了javascripe的包*/emitAssets: boolean/*** Whether to emit a manifest.json under assets dir to map hash-less filenames* to their hashed versions. Useful when you want to generate your own HTML* instead of using the one generated by Vite.** Example:** ```json* {* "main.js": "main.68fe3fad.js",* "style.css": "style.e6b63442.css"* }* ```* @default false*/emitManifest?: boolean/*** Predicate function that determines whether a link rel=modulepreload shall be* added to the index.html for the chunk passed in*/shouldPreload: ((chunk: OutputChunk) => boolean) | null/*** Enable 'rollup-plugin-vue'* @default true*/enableRollupPluginVue?: boolean/*** Project root directory. Can be an absolute path, or a path relative from* the location of the config file itself.* @default process.cwd()* 项目的根路径，默认是process.cwd(),就是项目的根路径，到src的上一层目录，一般不配置，使用默认的就好*/root?: string/*** Import alias. The entries can either be exact request -> request mappings* (exact, no wildcard syntax), or request path -> fs directory mappings.* When using directory mappings, the key **must start and end with a slash**.** Example `vite.config.js`:* ```js* module.exports = {* alias: {*// alias package names*'react': '@pika/react',*'react-dom': '@pika/react-dom'**// alias a path to a fs directory*// the key must start and end with a slash*'/@foo/': path.resolve(__dirname, 'some-special-dir')* }* }* ```* 重命名路径，默认必须要 //包裹 如：'/@foo/': path.resolve(__dirname, 'some-special-dir')， 用于项目中的文件路径的别名*/alias?: Record<string, string>/*** Function that tests a file path for inclusion as a static asset.* 默认需要一个函数，返回文件路径中是否包含静态资源，目前的作用我也不知道*/assetsInclude?: (file: string) => boolean/*** Custom file transforms.* 自定义文件转换*/transforms?: Transform[]/*** Custom index.html transforms.* 自定义index.html转换*/indexHtmlTransforms?: IndexHtmlTransform[]/*** Define global variable replacements.* Entries will be defined on `window` during dev and replaced during build.* 定义一个全局的变量替换，在生产环境中将会替换开发环境的遍历，*/define?: Record<string, any>/*** Resolvers to map dev server public path requests to/from file system paths,* and optionally map module ids to public path requests.* 解析器*/resolvers?: Resolver[]/*** Configure dep optimization behavior.** Example `vite.config.js`:* ```js* module.exports = {* optimizeDeps: {*exclude: ['dep-a', 'dep-b']* }* }* ```* 引入第三方的配置，不需要重新打包*/optimizeDeps?: DepOptimizationOptions/*** Options to pass to `@vue/compiler-dom`** /vuejs/vue-next/blob/master/packages/compiler-core/src/options.ts* vue的编译器的配置*/vueCompilerOptions?: CompilerOptions/*** Configure what tags/attributes to trasnform into asset url imports,* or disable the transform altogether with `false`.* 配置哪些标签/属性以url的形式导入*/vueTransformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']/*** The options for template block preprocessor render.* 模板块预处理器渲染的配置*/vueTemplatePreprocessOptions?: Record<string,SFCTemplateCompileOptions['preprocessOptions']>/*** Transform functions for Vue custom blocks.** Example `vue.config.js`:* ```js* module.exports = {* vueCustomBlockTransforms: {*i18n: src => `export default Comp => { ... }`* }* }* ```* vue自定义模块的转换*/vueCustomBlockTransforms?: Record<string, CustomBlockTransform>/*** Configure what to use for jsx factory and fragment.* @default 'vue'* jsx的模板选择，默认是vue*/jsx?:| 'vue'| 'preact'| 'react'| {factory?: stringfragment?: string}/*** Environment mode* 环境模式*/mode?: string/*** CSS preprocess options* css 的预设配置*/cssPreprocessOptions?: CssPreprocessOptions/*** CSS modules options* css模块配置*/cssModuleOptions?: SFCAsyncStyleCompileOptions['modulesOptions']/*** Enable esbuild* @default true* 是否使用es构建， 默认为true*/enableEsbuild?: boolean/*** Environment variables parsed from .env files* only ones starting with VITE_ are exposed on `import.meta.env`* @internal* 环境变量*/env?: DotenvParseOutput/*** Configure hmr websocket connection.* 配置websocket的连接，应该是用于热加载的吧*/hmr?: HmrConfig | boolean/*** Configure dev server hostname.* 配置主机名称*/hostname?: string// 配置端口port?: number// 配置是否自动打开浏览器open?: boolean/*** Configure https.* 是否使用https*/https?: boolean// https的配置httpsOptions?: ServerOptions/*** Configure custom proxy rules for the dev server. Uses* [`koa-proxies`](/vagusX/koa-proxies) which in turn uses* [`http-proxy`](/http-party/node-http-proxy). Each key can* be a path Full options* [here](/http-party/node-http-proxy#options).** Example `vite.config.js`:* ```js* module.exports = {* proxy: {*// string shorthand*'/foo': 'http://localhost:4567/foo',*// with options*'/api': {* target: '',* changeOrigin: true,* rewrite: path => path.replace(/^\/api/, '')*}* }* }* ```* 配置代理*/proxy?: Record<string, string | ProxiesOptions>
