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

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

建立配置文件


在根目录下面建立一个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>


官方连接

相关文章
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
25 7
|
2月前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
45 4
|
3月前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
38 5
|
3月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
49 6
|
2月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
3月前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
87 3