建立配置文件

在根目录下面建立一个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?: 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`](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>

官方连接

vite 构建vue3 项目配置文件的详情配置相关推荐

使用vite安装vue3项目，vue3安装router和vuex
目录安装vite/创建vue3项目安装router 安装vuex vite+vue3的axios配置及跨域安装vite/创建vue3项目推荐vite+vue3+elementplus教程,看这 ...
vue - - - - vite创建vue3项目（不使用TS）
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...
使用Vite构建Vue3组件库
前言自从使用上vite和vue3后就爱不释手了,vite的秒级启动速度属实香,再加上vue3的CompositionAPI和setup语法糖的使用简便性,工作中新项目已经开始用这一套了.而且现在vi ...
vite新建vue3项目采坑，官网流程之路，vite+vue3+elementpuls
Vite 构建可以使用 Vite 快速构建 Vue 项目. vue3文档操作步骤,按照文档操作,会有版本问题: vite构建后的vite版本是老版本: "vite": " ...
使用vite创建vue3项目
一.创建vite+vue项目 1.在命令行输入以下创建语句.然后根据下图所示,输入项目名称并选择vue框架即可 npm create vite@latest 创建完项目后,根据提示依次输入三条命令: ...
使用vue-cli创建构建vue3项目（npm方式）
1.运行命令 vue create myproject(项目名) 2.鼠标选择 "Default (Vue 3 Preview) ([Vue 3] babel, eslint)" ...
Vite --- 创建Vue3项目
Vite 需要 Node.js 版本 >= 12.0.0. 1. node -v 查看node当前版本号 2. npm方式创建Vue3项目 npm init @vitejs/app 输入项目名 ...
用 Vite 创建Vue3项目和相关开发工具配置
目录一.创建项目二.vite的快捷用法三.安装Vue3开发工具 Vite热更新.打包构建速度更快,但目前周边生态还不如 Webpack 成熟,目前实际开发中还是以 Webpack 为主,但目前就 ...
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
Vue3+Ts+Vite

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

建立配置文件

个人常用的配置文件

个人好几把刀理解配置详情如下

官方连接

vite 构建vue3 项目配置文件的详情配置相关推荐

最新文章

热门文章