vite 构建vue3 项目配置文件的详情配置

Posted 2022-12-16 twinkle||cll

建立配置文件

在根目录下面建立一个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 'es2020'
   * 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()
   *
   * https://rollupjs.org/guide/en/#big-list-of-options
   * 由于vite的打包使用的是rollup 所以该配置是rollup的输入配置
   */
  rollupInputOptions: ViteRollupInputOptions
  
  /**
   * Will be passed to bundle.generate()
   *
   * https://rollupjs.org/guide/en/#big-list-of-options
   * 该配置是rollup的输出配置
   */
  rollupOutputOptions: RollupOutputOptions
  
  /**
   * Will be passed to rollup-plugin-vue
   *
   * https://github.com/vuejs/rollup-plugin-vue/blob/next/src/index.ts
   */
  rollupPluginVueOptions: Partial<RollupPluginVueOptions>
  /**
   * Will be passed to @rollup/plugin-node-resolve
   * https://github.com/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`
   *
   * https://github.com/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?: string
        fragment?: 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`](https://github.com/vagusX/koa-proxies) which in turn uses
   * [`http-proxy`](https://github.com/http-party/node-http-proxy). Each key can
   * be a path Full options
   * [here](https://github.com/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: 'http://jsonplaceholder.typicode.com',
   *       changeOrigin: true,
   *       rewrite: path => path.replace(/^\\/api/, '')
   *     
   *   
   * 
   * ```
   * 配置代理
   */
  proxy?: Record<string, string | ProxiesOptions>
  

官方连接