vite完整配置项

/**
 * import.meta.env.VITE_x 在.env[mode]中定义的变量不能访问到要用 loadEnv函数代替
 * 
 * 
 * https://github.com/vitejs/awesome-vite#plugins
 */
import { defineConfig, loadEnv } from 'vite'

/**
 * postCssPxToRem 插件
 * npm i postcss-pxtorem -D
 * npm i postcss -D
 * npm i postcss-loader -D
 * npm i autoprefixer -D (待测试)
 * npm i postcss-import -D (待测试)
 * npm i postcss-url -D (待测试)
 * npm i postcss-aspect-ratio-mini -D (待测试)
 */
import postCssPxToRem from "postcss-pxtorem"
/**
 * vue 整合插件
 * npm i @vitejs/plugin-vue -D
 * npm i vue -D
 * npm i vue-router -D
 * npm i vuex -D
 * npm i axios -D
 */
import vue from '@vitejs/plugin-vue'
const url = require('url')
let parseURL = url.parse('http://user:pass@host.com:8080/p/a/t/h?name=zhangsan&age=12#hash', true, true)

// 解析路径
const path = require('path')

/**
 * 设置server.open默认打开的浏览器
 * npm i open -D
 */
const open = require('open');
process.env.BROWSER = open.apps.chrome


/**
 * gzip 压缩配置
 * @type {boolean}
 * @default false
 * @description 是否开启 gzip 压缩
 * npm i vite-plugin-compression -D
 */
import viteCompression from 'vite-plugin-compression'


/**
 * mockjs 配置
 * npm (配置)
 * npm i mockjs -D
 * npm i vite-plugin-mock -D
 * npm i cross-env -D
 * npm i vite-plugin-mock-server -D
 * yarn (配置)
 * yarn add -D cross-env vite-plugin-mock
 * yarn add  mockjsD
 */
import { viteMockServe } from 'vite-plugin-mock';

/**
 * yarn add vite-plugin-mock-server
 */
// import mockServer from 'vite-plugin-mock-server'
// vite-plugin-mock-server
// options.plugins.push(mockServer({
//     logLevel: 'info',
//     urlPrefixes: ['/api/'],
//     mockRootDir: './mock',
//     mockJsSuffix: '.mock.js',
//     mockTsSuffix: '.mock.ts',
//     noHandlerResponse404: true,
//     mockModules: []
// }))

// export default ({ command, mode }) => {
//     console.log(command, mode);
export default defineConfig(({ command, mode }) => {
  let options = {

    // q:root配置项有什么用?
    // a:root配置项是为了解决打包后的资源路径问题，比如打包后的index.html中的资源路径是相对于index.html的，而不是相对于域名的，这样会导致资源加载失败，所以需要设置root，将资源路径设置为相对于域名的
    root: process.cwd(), //项目根目录（index.html 文件所在的位置
    base: '/', //开发或生产环境服务的公共基础路径
    // mode:'development' 'production'
    define: { // 这是node环境读不了process，直接在代码中使用   例如：web中直接能调用，process.env.NODE_ENV
      "process.env.NODE_ENV": process.env.NODE_ENV !== 'production' ? 'development' : 'production',
      __PBR_APP_VERSION__: '1.0'
    },
    plugins: [vue(),

      // q:mock插件有什么用?
      // a:mock插件是为了解决开发环境下的接口调试问题，可以在开发环境下模拟接口返回数据，而不用等待后端接口开发完成

      // q:viteCompression插件有什么用?
      // a:viteCompression插件是为了解决生产环境下的资源压缩问题，可以在生产环境下对资源进行压缩，减少资源体积，提高加载速度
      // import { viteMockServe } from 'vite-plugin-mock';
      // viteCompression方法的参数是一个对象，对象中的属性是vite-plugin-compression插件的配置项

      viteCompression({
        filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
        threshold: 1024, // 文件容量大于这个值进行压缩
        algorithm: 'gzip', // 压缩方式
        ext: 'gz', // 后缀名
        deleteOriginFile: true, // 压缩后是否删除压缩源文件
      })
    ], // 需要用到的插件数组
    publicDir: 'public', // 静态资源文件夹，默认访问路径‘/’, 构建是会放在outDir根目录
    cacheDir: 'node_modules/.vite', // vite缓存文件目录，--force可以强制重新缓存
    resolve: {
      alias: { // 别名
        '@': path.resolve(__dirname, './src'),
        'comps': path.resolve(__dirname, './src/components'),
        'utils': path.resolve(__dirname, './src/utils'),
        'views': path.resolve(__dirname, './src/views'),
        'apis': path.resolve(__dirname, './src/apis')
      },
      dedupe: [], // 强制将相同依赖解析为同一副本， ======待研究怎么用======
      //package.json 相关 开

      // q:conditions 有什么用?举个例子
      // a:conditions 用于指定导入的模块的条件，比如指定导入的模块的环境
      conditions: [
        'import', // 导入时
        'require', // require时
        'node', // node环境
        'default', // 默认
        'import.meta', // 导入元数据
        'url', // url
        'script', // 脚本
        'worker', // worker
        'worker-src', // worker源
        'typeof', // 类型
        'browser', // 浏览器
        'esm', // esm
        'production', // 生产环境
        'development', // 开发环境
        'test', // 测试环境
        'electron', // electron
        'electron-renderer', // electron渲染器
        'electron-main', // electron主进程
        'nw', // nw
        'nwjs', // nwjs
        'web', // web
        'webworker', // webworker
        'global', // 全局
        'pure', // 纯
      ], // 场景条件， 
      mainFields: ['module', 'jsnext:main', 'jsnext'], // 入口点字段列表
      //package.json 相关 关
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], //导入时想要省略的扩展名列表
    },

    // q:CSS配置项有什么用?
    // a:CSS配置项是用来配置css相关的配置项
    CSS: {
      postcss: {
        plugins: [
          //import postCssPxToRem from "postcss-pxtorem"
          //npm i postcss-pxtorem 适配移动端配置
          // q:postCssPxToRem 为什么不用px2rem-loader
          // a:px2rem-loader 会把所有的px都转换成rem，但是有些px不需要转换，比如border-width:1px;这种就不需要转换
          postCssPxToRem({ // px转rem
            rootValue({ file }) { // 根元素字体大小 rootValue
              return file.indexOf('vant') !== -1 ? 37.5 : 75 // vant组件库字体大小为37.5,其他为75
            }, // 根元素字体大
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['van-'] // 不需要转换的选择器

          })
        ]
      }
      // modules:'',

      // preprocessorOptions: {},
    },

    // q:JSON配置项有什么用
    // a:JSON配置项是用来配置导入json文件的

    JSON: {
      namedExports: true, // 是否支持从 .json 文件中进行按名导入
      stringify: false, // 若设置为 true,性能好，单不支持按名导入
    },

    // q:esbuild配置项有什么用?
    // a:esbuild是一个JavaScript和TypeScript的构建工具，它可以在浏览器中运行，也可以在Node.js中运行，它可以将JavaScript和TypeScript代码转换为更快的JavaScript代码
    esbuild: { // esbuild配置项，false为关闭esbuild
      include: /\.[jt]sx?$/, // 匹配文件
      exclude: /node_modules/, // 排除文件
      // jsxInject: `import vue from 'vue'`, // 自动注入到每个jsx文件的顶部
      // jsxFactory: 'React.createElement', // 自定义jsx工厂函数
      // jsxFragment: 'React.Fragment', // 自定义jsx片段函数
      // tsconfigRaw: {}, // 自定义tsconfig.json
      // target: 'es2015', // 编译目标
    }, // esbuild配置项，false为关闭esbuild

    // q:assetsInclude配置项有什么用?
    // a:assetsInclude配置项是用来配置静态资源文件夹的，比如你的静态资源文件夹是static，那么你就可以配置assetsInclude: 'static'，这样vite就会把static文件夹下的文件都当做静态资源文件处理
    assetsInclude: '', // 静态资源文件夹，默认访问路径‘/’, 构建是会放在outDir根目录
    logLevel: 'info', // 控制台输出级别，默认info，'info' | 'warn' | 'error' | 'silent'
    clearScreen: true, // 清屏， --clearScreen false
    envDir: './', //默认 root
    server: {
      host: '0.0.0.0',
      port: 9999, // 端口，若端口被占用时，自动尝试下一个端口
      
      // q:strictPort配置项有什么用?
      // a:strictPort配置项是用来配置端口被占用时直接退出的，比如你的端口是9999，但是9999被占用了，那么你就可以配置strictPort: true，这样vite就会直接退出
      strictPort: true, // 若端口被占用时直接退出
      cssPreprocessOptions: {
        less: {
          javascriptEnabled: true,
        },
      },

      // q:https配置项有什么用?
      // a:https配置项是用来配置https的，比如你的后端接口是https://localhost:3000，那么你就可以配置https: true，这样vite就会把https://localhost:3000作为后端接口
      // https: {
      // host: 'localhost',
      // port: 443,
      // key: fs.readFileSync('path/to/key'),
      // cert: fs.readFileSync('path/to/cert'),
      // },
      https: false, // 启用 TLS + HTTP/2 配置，注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS。false则关闭

      // open: {
      //   app: {
      //     name: 'chrome',
      //     args: ['--incognito'],
      //   },
      //   path: '/foo',
      //   options: {
      //     wait: true,
      //   },
      // },
      open: '/', // 项目启动时自动打开浏览器，可以设置默认打开的路径

      // q:proxy配置项有什么用?
      // a:proxy配置项是用来配置代理的，比如你的后端接口是http://localhost:3000，那么你就可以配置proxy: { '/api': 'http://localhost:3000' }，这样vite就会把/api开头的请求都代理到http://localhost:3000
      proxy: { // 服务器代理 https://github.com/http-party/node-http-proxy#options
        '/foo': 'http://localhost:4567/foo',
        '/apidd': {
          target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
          configure: (proxy, options) => {
            // proxy 是 'http-proxy' 的实例
          },
        },
        '^/fallback/.*': { // 正则
          target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_FALLBACK_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/fallback/, '')
        },
      },
      cors: true, // 跨域，默认允许任何源 或 {origin: 'http://example.com',optionsSuccessStatus: 200}

      //q:force配置项有什么用?
      //a:force配置项是用来配置强制依赖预构建的，比如你的项目依赖了vue，那么你就可以配置force: true，这样vite就会把vue预构建
      force: false, // 强制依赖预构建

      // q:fsServe配置项有什么用?
      // a:fsServe配置项是用来配置是否启用文件系统访问的，比如你的项目依赖了vue，那么你就可以配置fsServe: true，这样vite就会把vue预构建
      fsServe: { // 配置文件系统访问
        root: process.cwd(),
        strict: true,
      },

      // q:hmr配置项有什么用?
      // a:hmr配置项是用来配置是否启用热模块替换的，比如你的项目依赖了vue，那么你就可以配置hmr: true，这样vite就会把vue预构建 https://www.cnblogs.com/zhongweiv/p/14488838.html
      hmr: true, //禁用或配置 HMR 连接
      /**
       * { 
       *    protocol?: string, 
       *    host?: string, 
       *    port?: number, 
       *    path?: string, 
       *    timeout?: number, 
       *    overlay?: boolean, // 屏蔽开发服务器错误提示
       *    clientPort?: number, 
       *    server?: Server 
       * }
       */
      watch: {
        usePolling: false, // 是否使用轮询
        interval: 100, // 多久检查一次变动
        binaryInterval: 300, // 监听二进制文件时的轮询间隔
        disableGlobbing: false, // 是否禁用 globbing，如果你的文件夹中有大量文件，可以尝试禁用它
      }, //传递给 chokidar 的文件系统监听器选项 ， 
      middlewareMode: 'html', // 
      // https://cn.vitejs.dev/guide/ssr.html#setting-up-the-dev-server  ======待研究怎么用======
      /**
       * 以中间件模式创建 Vite 服务器。（不含 HTTP 服务器）
       * 'ssr' 将禁用 Vite 自身的 HTML 服务逻辑，因此你应该手动为 index.html 提供服务。
       * 'html' 将启用 Vite 自身的 HTML 服务逻辑。
       */
    },

    // q:build配置项有什么用?
    // a:build配置项是用来配置构建的
    build: { // 构建
      target: 'modules', // 构建目标格式，默认是modules，也可以是esbuild配置项，https://esbuild.github.io/api/#target
      outDir: 'dist', // 构建输出路径
      assetsDir: 'assets', //静态资源文件夹，和outDir同级
      assetsInlineLimit: 4096, // 小于此大小的资源将被内联为 base64 编码，以减少请求数 4096 kb
      cssCodeSplit: true, // 运行css文件按chunk拆分，chunk加载时插入，如果false则所有的样式导出为一个css文件
      cssPreprocessOptions: { // css预处理器配置项
        scss: { // scss预处理器配置项
          additionalData: `$injectedColor: orange;` // 注入到每个scss文件的顶部
        }, // scss预处理器配置项
        less: { // less预处理器配置项
          javascriptEnabled: true // 允许在less文件中使用js
        },
        stylus: { // stylus预处理器配置项
          additionalData: `$injectedColor = orange` // 注入到每个stylus文件的顶部
        },
      }, // css预处理器配置项
      // cssModulesOptions: {}, // css模块配置项

      // q:sourcemap有什么用?
      // a:sourcemap是用来调试的，当你的代码出错时，你可以通过sourcemap找到出错的代码位置
      sourcemap: false, // 构建后是否生成sourcemap文件 
      /*
       * true，将会创建一个独立的 source map 文件
       * 'inline'，source map 将作为一个 data URI 附加在输出文件中
       * 'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留。
       */
      rollupOptions: { // rollup配置项  https://rollupjs.org/guide/en/#big-list-of-options
        external: ['vue', 'vue-router', 'vuex', 'axios', 'vant'], // 不打包的模块 https://rollupjs.org/guide/en/#external
        output: { // 输出配置 https://rollupjs.org/guide/en/#outputoptions
          manualChunks: { // 手动拆分代码块 https://rollupjs.org/guide/en/#outputmanualchunks
            vue: ['vue', 'vue-router', 'vuex'], // 拆分vue相关的包
            vant: ['vant'], // 拆分vant相关的包
            axios: ['axios'], // 拆分axios相关的包
          },
        },
      },
      // q:commonjsOptions这个配置有什么用?
      // a:commonjsOptions是@rollup/plugin-commonjs插件的配置，用于将CommonJS模块转换为ES模块，以便可以在Rollup中使用它们
      // q:为什么要转换CommonJS模块?
      // a:因为rollup只能打包ES模块，如果要打包CommonJS模块，就需要使用@rollup/plugin-commonjs插件
      commonjsOptions: { // @rollup/plugin-commonjs 插件的选项
        include: /node_modules/, // 需要转换的模块
        exclude: /node_modules\/(?!vite)/, // 不需要转换的模块
        sourceMap: false, // 是否生成sourcemap
        extensions: ['.js', '.cjs'], // 需要转换的文件后缀
        ignoreGlobal: false, // 忽略全局模块
        ignore: [], // 忽略的模块
        namedExports: {}, // 模块的命名导出
        transformMixedEsModules: false, // 是否转换混合的ES模块
        esmExternals: false, // 是否将外部模块视为ES模块
        requireReturnsDefault: 'auto', // 是否将require()视为返回default属性的函数
      }, // @rollup/plugin-commonjs 插件的选项
      dynamicImportVarsOptions: {}, // @rollup/plugin-dynamic-import-vars 的选项

      // q:lib这个配置有什么用?
      // a:lib是用来配置构建为库的
      // q:为什么要构建为库?
      // a:因为有时候我们需要将一些公共的方法或者组件抽离出来，作为一个独立的库，供其他项目使用
      // q:构建为库的配置项有哪些?
      // a:https://cn.vitejs.dev/guide/build.html#library-mode
      lib: {
        entry: path.resolve(__dirname, 'src/index.ts'), // 入口文件
        name: 'ViteLib', // 暴露的全局变量
        formats: ['es', 'umd'], // 构建的格式
        fileName: (format) => `vite-lib.${format}.js`, // 输出的文件名
      }, // 构建为库,https://cn.vitejs.dev/guide/build.html#library-mode
      /**
       * entry 是必须的因为库不能使用 HTML 作为入口。
       * name 则是暴露的全局变量，在 formats 包含 'umd' 或 'iife' 时是必须的。
       * 默认 formats 是 ['es', 'umd'] 。
       * fileName 是输出的包文件名，默认 fileName 是 package.json 的 name 选项，同时，它还可以被定义为参数为 format 的函数。
       */
      entry: "./main.ts", // 入口文件

      // q:manifest这个配置有什么用?
      // a:manifest是一个json文件，记录了构建后的文件名和文件内容的hash值，用于缓存控制
      // q:manifest文件是怎么生成的?
      // a:manifest文件是在构建时生成的，构建时会根据构建后的文件名和文件内容的hash值生成一个manifest.json文件
      // q:manifest文件有什么用?
      // a:manifest文件有两个作用，第一是用于缓存控制，第二是用于服务端渲染
      // q:manifest文件用于缓存控制是怎么做的?
      // a:manifest文件用于缓存控制是通过在html中引入manifest.json文件，然后在html中引入的js文件中通过读取manifest.json文件中的hash值来判断是否需要更新缓存
      // q:manifest文件用于服务端渲染是怎么做的?
      // a:manifest文件用于服务端渲染是通过在服务端渲染的时候，通过读取manifest.json文件中的hash值来判断是否需要更新缓存
      manifest: false,
      // q:minify这个配置有什么用?
      // a:minify用于压缩构建后的代码
      // q:minify这个配置是怎么做的?
      // a:minify是在构建时通过rollup-plugin-terser插件来实现的
      // q:rollup-plugin-terser这个插件是怎么做的?
      // a:rollup-plugin-terser这个插件是通过terser这个库来实现的
      // q:terser这个库是怎么做的?
      // a:terser这个库是通过esbuild来实现的
      // q:esbuild是怎么做的?
      // a:esbuild是通过esbuild-wasm来实现的
      minify: 'terser', // 构建后是否压缩代码，terser是默认的压缩器，也可以是esbuild配置项，https://esbuild.github.io/api/#minify
      TerserOptions: { // esbuild的压缩配置项 https://esbuild.github.io/api/#minify
        compress: { // 压缩配置项 https://esbuild.github.io/api/#minify
          drop_console: true, // 去掉console
          drop_debugger: true, // 去掉debugger
          pure_funcs: ['console.log'], // 去掉console.log
        },
      }, // terser混淆配置项
      cleanCssOptions: {}, // clean css 配置项， ======待研究怎么用======
      write: true, // 是否允许构建写入磁盘，false一般用在对构建做进一步处理
      emptyOutDir: true, // 构建前清库outDir目录
      brotliSize: true, //启用/禁用 brotli 压缩大小报告, 大型项目禁用可能提高构建速度
      chunkSizeWarningLimit: 500, //chunk 大小警告的限制（以 kbs 为单位
      // q:watch这个配置有什么用?
      // a:watch是用来监听文件变化的
      // q:watch这个配置是怎么做的?
      // a:watch是通过rollup的watch选项来实现的
      // q:rollup的watch选项是怎么做的?
      // a:rollup的watch选项是通过chokidar来实现的
      // q:chokidar是怎么做的?
      // a:chokidar是通过fs.watch来实现的
      // q:fs.watch是怎么做的?
      // a:fs.watch是通过fs.watchFile来实现的
      // q:fs.watchFile是怎么做的?
      // a:fs.watchFile是通过fs.stat来实现的
      // q:fs.stat是怎么做的?
      // a:fs.stat是通过fs.fstat来实现的
      // q:fs.fstat是怎么做的?
      // a:fs.fstat是通过fs.open来实现的
      // q:fs.open是怎么做的?
      // ...
      watch: {
        clearScreen: true, // 清除屏幕
        chokidar: {}, // chokidar的配置项
        exclude: [], // 不需要监听的文件
        include: [], // 需要监听的文件
        usePolling: false, // 是否监听文件变化
        interval: 100, // 多久检查一次文件变化
        binaryInterval: 300, // 多久检查一次二进制文件变化  https://rollupjs.org/guide/en/#watchoptions
        // chokidar: { // chokidar的配置项
        //   usePolling: true, // 是否监听文件变化
        //   interval: 100, // 多久检查一次文件变化
        //   binaryInterval: 300, // 多久检查一次二进制文件变化
        //   ignoreInitial: true, // 忽略初始添加的文件
        //   ignored: /node_modules/, // 忽略监听的文件
        //   awaitWriteFinish: { // 等待文件写入完成后再重新构建
        //     stabilityThreshold: 2000, // 等待多久
        //     pollInterval: 100, // 多久检查一次文件变化
        //   },
        // },

      }, // watchoptions,https://rollupjs.org/guide/en/#watch-options, 设置为 {} 则会启用 rollup 的监听器,代码改变时自动打包
    },
    // q:optimizeDeps这个配置有什么用?
    // a:optimizeDeps用于优化依赖 https://vitejs.dev/config/#dep-optimization-options
    // q:optimizeDeps这个配置是怎么做的?
    // a:optimizeDeps是通过rollup-plugin-node-resolve插件来实现的
    // q:rollup-plugin-node-resolve这个插件是怎么做的?
    // a:rollup-plugin-node-resolve这个插件是通过resolve这个库来实现的
    optimizeDeps: { // 依赖优化
      // entries, '' | [], // 预构建入口
      // exclude: [], // 预构建排查的依赖
      // include: [], // 不在 node_modules 中的依赖包预构建
      // keepNames:false, //打包器有时需要重命名符号以避免冲突
    },

    // q:ssr配置项有什么用?
    // a:ssr配置项用于服务端渲染
    ssr: { // 试验型，没做研究
      // external: [], //强制外部化的依赖
      // noExternal: '', // 防止外部化的依赖
      // target:'node', // SSR 服务器的构建目标
    }
  }
  if (command === 'serve') {
    // dev & serve

    //vite-plugin-mock
    //mock配置
    let prodMock = true;
    const viteMockServeOptions = {
      mockPath: 'mock',
      supportTs: false,
      ignore: undefined,
      watchFiles: true,
      localEnabled: command === 'serve',
      prodEnabled: command !== 'serve' && prodMock,
      injectCode: ``, // prodEnabled=true生效 main.{ts,js}
      injectFile: '', // default: path.resolve(process.cwd(),'src/main.{ts,js}')
      configPath: '', //default: vite.mock.config.ts
      logger: true, //请求是输入日志
    }
    options.plugins.push(viteMockServe(viteMockServeOptions))
    console.log('mock')
  } else {
    // build
    
    options.plugins.push(viteCompression(viteCompressionOptions))
  }
  return options
})