vite 2

今天药忘吃喽~ 2022-11-01 10:51 261阅读 0赞

# [vite][] #

### config ###

vue.config.ts 配置说明

// 为配置定义的 ts 
    import {  defineConfig } from "vite";
    import reactRefresh from "@vitejs/plugin-react-refresh";
    import path from "path";
    
    // console.log(path.resolve(__dirname, "../src/components"));
    // exit(1);
    
    // https://vitejs.dev/config/
    const config = defineConfig({ 
      // ---------- shared options start
      // html 静态页面目录
      root: "./",
      // url 路径 default /
      base: "/",
      // mode: 'development' for serve, 'production' for build
      mode: "development",
      publicDir: "build",
      // 获取全局变量,改变变量的名字
      // define: { 
      // publicPath: "qiphon",
      // },
      // 路径别名
      resolve: { 
        alias: { 
          "@": path.resolve(__dirname, "../src"),
          "@components": path.resolve(__dirname, "../src/components"),
        },
      },
      css: { 
        modules: { 
          scopeBehaviour: "local",
        },
        // postcss.config.js same
        // postcss: {},
      },
      //
      json: { 
        // Whether to support named imports from .json files.
        // namedExports: true
        // json 文件是否以 字符串的形式引入，这种形式。这比Object形式性能要高得多，尤其是在JSON文件较大时。
        // stringify:
      },
      // esbuild 打包的参数，主要应用于 ts、jsx、tsx，需要参考esbuild
      // esbuild:{},
      /** * 可以让资源不被 plugin （没有使用 enforce: 'pre' 的） 处理 * https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts */
      // assetsInclude:
      logLevel: "info",
      clearScreen: false,
      plugins: [reactRefresh()],
      // -------------------- Server Options start
      server: { 
        host: "qiphon.com",
        port: 3001,
        // when true，if port in use will exit
        strictPort: false,
        // Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.
        // The value can also be an options object passed to https.createServer().
        // https: string | obj
        // open broswer
        // open: false,
        // request proxy for development
        // proxy: { 
        // // string shorthand
        // "/foo": "http://localhost:4567/foo",
        // // with options
        // "/api": { 
        // target: "http://jsonplaceholder.typicode.com",
        // changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, ""),
        // },
        // // with RegEx
        // "^/fallback/.*": { 
        // target: "http://jsonplaceholder.typicode.com",
        // changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/fallback/, ""),
        // },
        // },
        // cors: // 跨域配置项，默认允许任何源
        force: true, // Set to true to force dependency pre-bundling.
        // hmr:
        // https://github.com/paulmillr/chokidar#api
        // watch:
      },
      // --------------------- build options start ---------------
      build: { 
        /** * * Default: 'modules' - Similar to `@babel/preset-env`'s targets.esmodules, * transpile targeting browsers that natively support es module imports. Also * injects a light-weight dynamic import polyfill. * https://caniuse.com/es6-module * * esnext 会以最小化程度进行编译，谨慎使用 * * Another special value is 'esnext' - which only performs minimal trasnpiling * (for minification compat) and assumes native dynamic imports support. */
        // target: ""
        // Default: true unless build.target is 'esnext' , will inject import 'vite/dynamic-import-polyfill' to html
        polyfillDynamicImport: true,
        // 打包后的文件路径
        outDir: "build",
        // By default, Vite will empty the outDir on build if it is inside project root. 删除之前的打包文件
        emptyOutDir: true,
        // 静态资源路径
        // assetsDir: string
        /** * Imported or referenced assets that are smaller than this threshold will be inlined as base64 URLs to avoid extra http requests. Set to 0 to disable inlining altogether. * 静态资源小于多少时使用base64 形式内联写入 * */
        assetsInlineLimit: 8 * 1024,
        /** * false：所有的 css 会被打包到一个css文件中 * true：css样式文件会拆分到各个异步chunk 中 */
        cssCodeSplit: true,
        sourcemap: true,
        // https://rollupjs.org/guide/en/#big-list-of-options
        // rollupOptions:
        // Options to pass on to @rollup/plugin-commonjs. https://github.com/rollup/plugins/tree/master/packages/commonjs
        // commonjsOptions:
        //
        // lib:
        // When set to true, the build will also generate a manifest.json
        manifest: true,
        minify: false,
        // Additional minify options to pass on to Terser.
        // terserOptions:
        // Constructor options to pass on to clean-css. https://github.com/jakubpawlowicz/clean-css#constructor-options
        // cleanCssOptions:
        //
        // write:
        // 是否启用 brotli 压缩，IE 不支持
        brotliSize: false,
        // chunk 超大警告显示
        chunkSizeWarningLimit: 300,
      },
      // ----------------- Dep Optimization Options Related: Dependency Pre-Bundling
      optimizeDeps: { 
        // 以指定依赖作为入口
        // entries:
        // 不参与 pre-build 的文件
        // exclude:
        // include:
      },
      // ---------- SSR Options in minor releases
    });
    
    console.log("building mode : " + config.mode);
    
    export default config;

[vite]: https://vitejs.dev/