一：vite构建项目配置base

1、base配置打包公共路径

打开package.json

做项目时可以不去掉

好了，在以上你构建了vite，并配置了最简单的操作后，你准备配置vite.confing.ts

开发环境下我们的图片位置在/src,ok，本地没问题正常显示，你打了个包 (npm run build),然后又运行了npm脚本preview，

也没问题，但是在一些服务器上，使用绝对目录会导致404，所以我们需要配置为相对目录

二:路径别名

先引入path，在配置，注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！

resolve.alias¶

类型：Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement, customResolver } 的数组。

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

更高级的自定义解析方法可以通过插件实现。

在 SSR 中使用

如果你已经为 SSR 外部化的依赖配置了别名，你可能想要为真实的 node_modules 包配别名. Yarn 和 pnpm 都支持通过 npm: 前缀配置别名。

import { resolve } from "path";

 resolve: {

    alias: {

      "@": resolve(__dirname, "src"),

      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！

      "comp": resolve(__dirname, "src/components"),

      // 配置图片要这样引用

      "/img": "./src/assets",

    },

  },

三：生产环境移除log + 跨域

.生产环境时移除console.log的配置

生产环境不允许出现调试代码

官网-构建选项中

drop_console（默认值：） -- 传递以放弃对函数的调用。如果您希望删除特定的函数调用例如和/或保留函数参数的副作用删除函数调用后，请改用。false true console.*console.infopure_funcs
drop_debugger（默认值：） -- 删除语句true debugger;

build: {

    minify: 'terser', // 必须启用：terserOptions配置才会有效

    terserOptions: {

      compress: {

        // 生产环境时移除console.log调试代码

        drop_console:true,

        drop_debugger: true,

      }

    }

  },

vite.config.ts 完整代码：

import { defineConfig } from "vite";

import AutoImport from "unplugin-auto-import/vite";

import Components from "unplugin-vue-components/vite";

import vue from "@vitejs/plugin-vue";

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import path from "path";

export default defineConfig({

  plugins: [

    vue(),

    //引入vue 插件

    AutoImport({

      imports: ["vue"],

      dts: "src/auto-import.d.ts",

    }),

    //plus按需引入

    AutoImport({

      resolvers: [ElementPlusResolver()],

    }),

    //plus按需引入

    Components({

      resolvers: [ElementPlusResolver()],

    }),

  ],

  build: {

    minify: "terser", // 必须开启：使用terserOptions才有效果

    terserOptions: {

      compress: {

        //生产环境时移除console

        drop_console: true,

        drop_debugger: true,

      },

    },

  },

  resolve: {

    //配置根路径别名： import('@/pages/login/login.vue')

    alias: {

      "@": path.resolve(__dirname, "src"),

      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！

      "comp": resolve(__dirname, "src/components"),

      // 配置图片要这样引用

      "/img": "./src/assets",

    },

  },

  // 跨域

  server: {

    //使用IP能访问

    host: "0.0.0.0",

    // 热更新

    hmr: true,

    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口

    strictPort: false,

    //自定义代理规则

    proxy: {

      // 选项写法

      "/api": {

        target: "https://admin.itrustnow.com",

        // target: "http://192.168.0.50:8083",

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ""),

      },

    },

  },

});

Vite常用基本配置

{

  root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,

  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径

  mode: 'development', // 模式

  plugins: [vue()], // 需要用到的插件数组

  publicDir: 'public', // 静态资源服务的文件夹

  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录

  resolve: {

    alias: [ // 文件系统路径别名

      {

        find: /\/@\//,

        replacement: pathResolve('src') + '/'

      }

    ],

    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本

    conditions: [], // 解决程序包中 情景导出 时的其他允许条件

    mainFields: [], // 解析包入口点尝试的字段列表

    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表

    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份

  },

  css: {

    modules: {

      scopeBehaviour: 'global' | 'local',

      // ...

    },

    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源

    preprocessorOptions: { // css的预处理器选项

      scss: {

        additionalData: `$injectedColor: orange;`

      }

    }

  },

  json: {

    namedExports: true, // 是否支持从.json文件中进行按名导入

    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入

  },

  esbuild: { // 最常见的用例是自定义 JSX

    jsxFactory: 'h',

    jsxFragment: 'Fragment'

  },

  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理

  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'

  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息

  envDir: '/', // 用于加载 .env 文件的目录

  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中

  server: {

    host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址

    port: 5000, // 指定开发服务器端口

    strictPort: true, // 若端口已被占用则会直接退出

    https: false, // 启用 TLS + HTTP/2

    open: true, // 启动时自动在浏览器中打开应用程序

    proxy: { // 配置自定义代理规则

      '/api': {

        target: 'http://jsonplaceholder.typicode.com',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, '')

      }

    },

    cors: true, // 配置 CORS

    force: true, // 强制使依赖预构建

    hmr: { // 禁用或配置 HMR 连接

      // ...

    },

    watch: { // 传递给 chokidar 的文件系统监听器选项

      // ...

    },

    middlewareMode: '', // 以中间件模式创建 Vite 服务器

    fs: {

      strict: true, // 限制为工作区 root 路径以外的文件的访问

      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务

      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单

    },

    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin

  },

  build: {

    target: ['modules'], // 设置最终构建的浏览器兼容目标

    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill

    outDir: 'dist', // 指定输出路径

    assetsDir: 'assets', // 指定生成静态文件目录

    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码

    cssCodeSplit: true, // 启用 CSS 代码拆分

    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致

    sourcemap: false, // 构建后是否生成 source map 文件

    rollupOptions: {}, // 自定义底层的 Rollup 打包配置

    lib: {}, // 构建为库

    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件

    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件

    ssr: undefined, // 生成面向 SSR 的构建

    minify: 'esbuild', // 指定使用哪种混淆器

    terserOptions: {}, // 传递给 Terser 的更多 minify 选项

    write: true, // 启用将构建后的文件写入磁盘

    emptyOutDir: true, // 构建时清空该目录

    brotliSize: true, // 启用 brotli 压缩大小报告

    chunkSizeWarningLimit: 500, // chunk 大小警告的限制

    watch: null, // 设置为 {} 则会启用 rollup 的监听器

  },

  preview: {

    port: 5000, // 指定开发服务器端口

    strictPort: true, // 若端口已被占用则会直接退出

    https: false, // 启用 TLS + HTTP/2

    open: true, // 启动时自动在浏览器中打开应用程序

    proxy: { // 配置自定义代理规则

      '/api': {

        target: 'http://jsonplaceholder.typicode.com',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, '')

      }

    },

    cors: true, // 配置 CORS

  },

  optimizeDeps: {

    entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式

    exclude: [], // 在预构建中强制排除的依赖项

    include: [], // 可强制预构建链接的包

    keepNames: false, // true 可以在函数和类上保留 name 属性

  },

  ssr: {

    external: [], // 列出的是要为 SSR 强制外部化的依赖,

    noExternal: '', // 列出的是防止被 SSR 外部化依赖项

    target: 'node', // SSR 服务器的构建目标

  }

}

巴特西

Vite项目打包配置详解

一：vite构建项目配置base

1、base配置打包公共路径

二:路径别名

resolve.alias¶

三：生产环境移除log + 跨域

vite.config.ts 完整代码：

Vite常用基本配置

最新文章

热门文章

巴特西

Vite项目打包配置详解

一：vite构建项目 配置base

1、base配置打包公共路径

二:路径别名

resolve.alias¶

三：生产环境移除log + 跨域

vite.config.ts 完整代码：

Vite常用基本配置

最新文章

热门文章

一：vite构建项目配置base