vite 脚手架使用教程(六)-打包配置
通过打包的配置中，可以做一些提炼
直接新建一个 config 目录下index.ts
export default { // 基础路径 publicPath: "./", // 输出文件的目录 outputDir: "dist", // 静态目录 assetsDir: "static", // 页面标题 title: "vite + ts 项目模版", // CDN oepnCDN: "", // Gzip zip: false, // 全局主色 theme: {}, }; 复制代码然后对于 config 进行配置
import vue from "@vitejs/plugin-vue"; import { loadEnv } from "vite"; // 当引入 "unplugin-vue-components/vite 组件之后，页面中需要引入组件的地方就都不需要引入了 import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import DefineOptions from "unplugin-vue-define-options/vite"; import { NaiveUiResolver } from "unplugin-vue-components/resolvers"; import type { UserConfig, ConfigEnv } from "vite"; import viteCompression from "vite-plugin-compression"; import { createHtmlPlugin } from "vite-plugin-html"; import config from "./config/index"; const CWD = process.cwd(); export default ({ mode }: ConfigEnv): UserConfig => { const { VITE_NODE_ENV, VUE_APP_FETCH_BASE_URL } = loadEnv(mode, CWD); const isProd = ["development", "test", "production"].includes(VITE_NODE_ENV); return { // 打包路径 base: config.publicPath, plugins: [ vue(), createHtmlPlugin({ minify: true, // 是否压缩 html /** * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除 * @default src/main.ts */ entry: "src/main.ts", /** * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置 * @default index.html */ // 例如: "public/index.html" template: "/index.html", inject: { data: { title: config.title, injectScript: config.oepnCDN ? "" : "", }, }, }), DefineOptions(), AutoImport({ imports: [ "vue", "vue-router", "pinia", { "naive-ui": [ "useDialog", "useMessage", "useNotification", "useLoadingBar", ], }, ], }), Components({ resolvers: [NaiveUiResolver()], }), // gzip压缩 生产环境生成 .gz 文件 config.zip ? viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: "gzip", ext: ".gz", }) : {} ], // 设置别名 resolve: { alias: [ { find: "@", replacement: "/src", }, ], }, // 启动服务配置 server: { host: "0.0.0.0", port: 8000, open: true, https: false, proxy: { "/api/v1": { target: VUE_APP_FETCH_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, // 去除 console debugger esbuild: { pure: isProd ? ["console.log", "debugger"] : [], }, // 生产环境打包配置 build: { target: "es2015", // 浏览器兼容性 cssTarget: "chrome79", // 此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）。 outDir: config.outputDir || "dist", // 指定输出路径 assetsDir: config.assetsDir || "static", // 指定生成静态资源的存放路径（相对于 build.outDir）。 manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件，包含了没有被 hash 的资源文件名和 hash 后版本的映射。可以为一些服务器框架渲染时提供正确的资源引入链接。 }, }; }; 复制代码index.html 配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%- title %></title> </head> <body> <noscript> <strong >We're sorry but <%- title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"> <div class="ant-spin-text"><%- title %></div> </div> <script type="module" src="/src/main.ts"></script> </body> </html>
作者：前端泥瓦匠
链接：https://juejin.cn/post/7128029094029033486
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。