Vite 共享配置

base

开发或生产环境服务的公共基础路径。合法的路径3种写法

1. 绝对URL   /test/
2. 完整的URL  https://test.com/
3. 空字符串或者 ./ （用于嵌入形式的开发）

mode 模式

指定当前应用的环境，

默认： 'development' 用于开发，'production' 用于构建

在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。

mode:'test'

plugins 插件注册

类型： (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]

项目中用到的插件注册。

更多关于插件文档： https://cn.vitejs.dev/guide/api-plugin.html

plugins: [vue()],

resolve

resolve.alias 别名配置

resolve.alias是Vite中用于配置别名的选项，它可以帮助我们在代码中使用简短的路径来引用模块。

例如，我们可以将import '../../../components/Button'这样冗长的路径改为import '@components/Button'。

// 配置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  },

使用别名

<img src="@/assets/33.gif" alt="">
import HelloWorld from '@components/HelloWorld.vue'

resolve.dedupe 去重依赖项，减小打包后的文件体积

resolve.dedupe是Vite中用于去重依赖项的选项，它可以帮助我们减小打包后的文件体积。在Vite中，如果多个模块都依赖同一个库，那么这个库就会被重复打包进每个模块中，导致最终的打包文件体积变大。而使用resolve.dedupe选项可以让Vite自动去重这些依赖项，只打包一份库代码，从而减小打包后的文件体积。

以下是如何在Vite中使用resolve.dedupe选项：

1. 在Vite配置文件（通常是vite.config.js）中添加resolve.dedupe选项：

// vite.config.js
module.exports = {
  resolve: {
    dedupe: ['lodash']
  }
}

上面的示例中，我们将lodash库添加到了resolve.dedupe选项中，表示Vite在打包时会自动去重所有依赖lodash的模块。

2. 在代码中正常引用依赖项即可，无需额外操作。

注意，resolve.dedupe选项只能去重ESM模块，对于CommonJS模块不起作用。此外，由于去重需要进行静态分析，因此可能会影响构建速度。因此，建议仅在必要时使用resolve.dedupe选项。

resolve.mainFields 用于指定模块入口文件的选项,帮助我们更精确地控制模块的解析过程

package.json 中，在解析包的入口点时尝试的字段列表。注意：这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，resolve.mainFields 将被忽略。

resolve.extensions  配置导入文件需要省去的扩展名

导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。

• 默认： ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

css

css.preprocessorOptions 用于配置 CSS 预处理器的选项 [例如：导入样式变量文件]

css.preprocessorOptions 是 Vite 中用于配置 CSS 预处理器的选项。通过该选项，可以指定使用哪种 CSS 预处理器，并设置相应的预处理器选项。

在 Vite 中支持以下几种 CSS 预处理器：

• Sass/SCSS
• Less
• styl/stylus - 仅支持 define，可以作为对象传递。

以 Sass/SCSS 为例，要使用 Sass/SCSS 预处理器，需要安装 sass 或 node-sass 模块，并在 Vite 的配置文件中进行如下配置：

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        // 在这里设置 Sass 的选项
      }
    }
  }
}

其中，scss 表示使用 Sass/SCSS 预处理器，可以根据需要改为 less 或 stylus。

在 scss 对象中，可以设置 Sass 的选项，例如：

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    }
  }
}

上面的配置中，additionalData 选项用于添加额外的 Sass 代码，这里添加了两个 @import 语句，用于导入变量和混合宏定义。

除了 scss 选项外，还可以设置 less 和 stylus 选项，分别对应 Less 和 Stylus 预处理器的选项。

通过 css.preprocessorOptions 配置选项，可以方便地使用各种 CSS 预处理器，并设置相应的选项。