vite打包配置白屏问题（vite.config.js详细配置）

Vite是一种快速构建现代化Web应用程序的工具，其打包配置可以通过创建一个vite.config.js文件来进行配置。以下是一个示例的vite.config.js文件，用于配置Vite的打包设置：

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  // 打包输出目录
  build: {
    outDir: 'dist',
  },
  // 其他配置项...
});

    上述示例中，我们通过build.outDir配置项指定了打包输出的目录为"dist"。

    除了指定打包输出目录外，还可以在build配置中进行其他的打包设置。例如：

•             build.sourcemap：设置是否生成源映射文件，默认为false。

•             build.assetsDir：指定静态资源目录的路径，默认为根目录。

•             build.cssCodeSplit：设置是否将CSS代码进行拆分，默认为true。

•             build.minify：设置是否压缩打包输出的文件，默认为true。

•             build.chunkSizeWarningLimit：设置单个文件的大小警告限制（以字节为单位），默认为500K。

•             build.rollupOptions：可以使用此选项来传递自定义的Rollup配置项。

    除了build配置项外，还可以在vite.config.js文件中进行其他相关的配置，例如指定开发服务器的配置、插件配置等。

    总结起来，通过创建vite.config.js文件，并根据需要进行相应的配置，可以对Vite进行灵活的打包设置。

    当以命令方式运行 vite 时，vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就会出现各种问题。如：

•             假设不配置 base 时，打包之后，访问时出现白屏。

•             alias 不配置的时候，每次引入文件需要找根目录，比较麻烦。

以下是 vite.config.js 的更多常用参数配置以及意义：

import { defineConfig } from 'vite' // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
import { viteMockServe } from "vite-plugin-mock"

const localEnabled = process.env.USE_MOCK || false;
const prodEnabled = process.env.USE_CHUNK_MOCK || false;

// https://vitejs.dev/config/
export default () => defineConfig({
 plugins: [ //配置需要使用的插件列表
  vue(),
  viteMockServe({
   mockPath: "./src/server/mock",
   localEnabled: localEnabled, // 开发打包开关 true时打开mock  false关闭mock
   prodEnabled: prodEnabled,//prodEnabled, // 生产打包开关
   // 这样可以控制关闭mock的时候不让mock打包到最终代码内
   injectCode: `
    import { setupProdMockServer } from './mockProdServer';
    setupProdMockServer();
   `,
   logger: false, //是否在控制台显示请求日志
   supportTs:false //打开后，可以读取 ts 文件模块 打开后将无法监视 .js 文件
  })
 ],
 // 强制预构建插件包
 optimizeDeps: {
  //检测需要预构建的依赖项
  entries: [],
  //默认情况下，不在 node_modules 中的，链接的包不会预构建
  include: ['axios'],
  exclude:['your-package-name'] //排除在优化之外
 },
 //静态资源服务的文件夹
 publicDir: "public",
 base: './',
 //静态资源处理
 assetsInclude: "",
 //控制台输出的级别 info 、warn、error、silent
 logLevel: "info",
 // 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
 clearScreen:true,
 resolve: {
  alias: [//配置别名
   { find: '@', replacement: resolve(__dirname, 'src') }
  ],
  // 情景导出 package.json 配置中的exports字段
  conditions: [],
  // 导入时想要省略的扩展名列表
  // 不建议使用 .vue 影响IDE和类型支持
  extensions:['.mjs','.js','.ts','.jsx','.tsx','.json']  
 },
 // css
 css: {
  // 配置 css modules 的行为
  modules: {  },
  // postCss 配置
  postcss: {
  },
  //指定传递给 css 预处理器的选项
  preprocessorOptions:{
   scss: {
    additionalData:`$injectedColor:orange;`
   }
  }
 },
 json: {
  //是否支持从 .json 文件中进行按名导入
  namedExports: true,
  //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好
  stringify:false
 },
 //继承自 esbuild 转换选项，最常见的用例是自定义 JSX
 esbuild: {
  jsxFactory: "h",
  jsxFragment: "Fragment",
  jsxInject:`import Vue from 'vue'`
 },
 //本地运行配置，以及反向代理配置
 server: {
  host: "localhost",
  https: false,//是否启用 http 2
  cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源
  open: true,//服务启动时自动在浏览器中打开应用
  port: "9000",
  strictPort: false, //设为true时端口被占用则直接退出，不会尝试下一个可用端口
  force: true,//是否强制依赖预构建
  hmr: false,//禁用或配置 HMR 连接
  // 传递给 chockidar 的文件系统监视器选项
  watch: {
   ignored:["!**/node_modules/your-package-name/**"]
  },
  // 反向代理配置
  proxy: { 
   '/api': {
    target: "https://xxxx.com/",
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
   }
  }
 },
 //打包配置
 build: {
  //浏览器兼容性  "esnext"|"modules"
  target: "modules",
  //指定输出路径
  outDir: "dist",
  //生成静态资源的存放路径
  assetsDir: "assets",
  //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
  assetsInlineLimit: 4096,
  //启用/禁用 CSS 代码拆分
  cssCodeSplit: true,
  //构建后是否生成 source map 文件
  sourcemap: false,
  //自定义底层的 Rollup 打包配置
  rollupOptions: {
  },
  //@rollup/plugin-commonjs 插件的选项
  commonjsOptions: {
  },
  //构建的库
  lib: {
  },
  //当设置为 true，构建后将会生成 manifest.json 文件
  manifest: false,
  // 设置为 false 可以禁用最小化混淆，
  // 或是用来指定使用哪种混淆器
  // boolean | 'terser' | 'esbuild'
  minify: "terser", //terser 构建后文件体积更小
  //传递给 Terser 的更多 minify 选项。
  terserOptions: {
  },
  //设置为 false 来禁用将构建后的文件写入磁盘
  write: true,
  //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
  emptyOutDir: true,
  //启用/禁用 brotli 压缩大小报告
  brotliSize: true,
  //chunk 大小警告的限制
  chunkSizeWarningLimit: 500
 },
 ssr: {
  // 列出的是要为 SSR 强制外部化的依赖
  external: [],
  //列出的是防止被 SSR 外部化依赖项
  noExternal: [
  ]
 }
})

 好了今天的文章就到此结束了。