vite设置

#vite设置

    ##这是项目初始化创建的时候设置（vite.config.js）：

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
4. // https://vitejs.dev/config/
5. export default defineConfig({
6.   plugins: [vue()],
7. })

复制代码

接下来围绕vite.config.js对项目进行设置（这里主要解说用到比较常用的操纵）：
        主要模块：
                    1、底子设置与环境变量
                    2、插件设置
                    3、开发服务器设置
                    4、打包设置
  1、底子设置与环境变量

        一下设置都在defineConfig下设置：
主要设置有：root(源文件路径)、define（全局常量）、resolve（模块剖析）、base(静态文件路径)等

1. import { defineConfig } from 'vite';
2. import vue from '@vitejs/plugin-vue';
3. import path from 'path';
5. // 定义一个路径解析辅助函数
6. const resolvePath = (relativePath) => path.resolve(__dirname, relativePath);
8. // 获取当前环境
9. const isDev = process.env.NODE_ENV !== 'production';
11. export default defineConfig({
12.   // 项目根目录，默认是配置文件所在目录，根据需要可自定义
13.   root: resolvePath('./'),
15.   // 应用的基路径，影响资源和路由的基准URL
16.   base: isDev ? '/' : './',
18.   // 静态资源目录，存放不会通过 Vite 转换的静态资源
19.   publicDir: 'public',
21.   // 环境变量前缀，确保安全性和避免冲突
22.   envPrefix: 'VITE_',
24.   // 定义全局常量，用于环境变量注入或其他编译时替换
25.   define: {
26.     __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
27.     'process.env': process.env,
28.   },
30.   // 配置模块解析规则，如别名，简化导入路径
31.   resolve: {
32.     alias: [
33.       { find: '@', replacement: resolvePath('src') },
34.     ],
35.     extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
36.   },
38.   // CSS配置，包括预处理器设置等
39.   css: {
40.     preprocessorOptions: {
41.       less: {
42.         modifyVars: {
43.           hack: `true; @import (reference) "${resolvePath('src/assets/css/variables.less')}";`,
44.         },
45.         javascriptEnabled: true,
46.       },
47.     },
48.   },
49.     //打包忽略的debug
50.     esbuild:{
51.       drop: isDev ? [] : ["console", "debugger"]
52.     },
54.   // 依赖优化配置，控制哪些依赖进行预构建等
55.   optimizeDeps: {
56.     include: ['vue', 'vue-router'],
57.     exclude: ['lodash-es'],
58.   },
60.   // 日志配置，虽然未展示具体配置，但可通过此选项调整日志输出
61.   // logger: { ... },
63. });

复制代码

2、插件设置

plugins设置(这个，模块主要是针对三方库的设置，不用具体了解)：
库文件设置主要是如下两个（参考）：
npm | Home
简介 | Rollup 中文文档
主要用于安装库的运用导入（包括打包库、图标库、以及各种格式优化等）可以根据差异模式进行设置，这里不区分开发和生产模式：

1. import postcss from 'rollup-plugin-postcss';//压缩css
2. import VitePluginDistZipJs from "vite-plugin-zip-dist";//zip构建
3. import htmlMinifier from 'html-minifier';//html压缩
4. import viteImagemin from 'vite-plugin-imagemin'//图片压缩
5. import AutoImport from 'unplugin-auto-import/vite'//自动导入Vue和WebExtension Polyfill的相关功能
6. import copy from 'rollup-plugin-copy'//文件复制
7.     plugins: [
8.         vue(),
9.         //Build zip
10.         mode() === 'development' ? null : VitePluginDistZipJs(
11.           {
12.             zipName: 'moolah-extension'  + '-' + browser()  + '-' + mode() + '.' + process.env.VITE_VERSION,
13.             dayjsFormat: '',
14.             zipDir: r('dist'),
15.           }
16.         ),
17.         //compress css
18.        isDev ? null : postcss({
19.           plugins: [],
20.           extract: 'style.css',
21.           minimize: true,
22.         }),
23.         //compress html
24.         {
25.           name: 'html-minify',
26.           transformIndexHtml(html) {
27.             return htmlMinifier.minify(html, {
28.               collapseWhitespace: true, // 折叠空白符，将多余的空格和换行符折叠为一个空格
29.               removeComments: true,// 删除 HTML 中的注释
30.               minifyCSS: true,// 压缩内联 CSS
31.               minifyJS: true, // 压缩内联 JavaScript
32.               conservativeCollapse: true // 保守地折叠空白符，仅在标签之间的空格会被折叠，忽略元素内容中的空格
33.             });
34.           }
35.         },
36.         //compress Img
37.         viteImagemin({
38.           gifsicle: {
39.             optimizationLevel: 7,
40.             interlaced: false,
41.           },
42.           optipng: {
43.             optimizationLevel: 7,
44.           },
45.           mozjpeg: {
46.             quality: 20,
47.           },
48.           pngquant: {
49.             quality: [0.8, 0.9],
50.             speed: 4,
51.           },
52.           svgo: {
53.             plugins: [
54.               {
55.                 name: 'removeViewBox',
56.               },
57.               {
58.                 name: 'removeEmptyAttrs',
59.                 active: false,
60.               },
61.             ],
62.           },
63.         }),
65.         AutoImport({
66.             imports: [
67.                 "vue",
68.                 {
69.                     'webextension-polyfill': [
70.                         ['*', 'browser'],
71.                     ],
72.                 },
73.             ],
74.         }),
75.          // rewrite assets to use relative path-路径重写
76.         {
77.             name: 'assets-rewrite',
78.             enforce: 'post',
79.             apply: 'build',
80.             transformIndexHtml(html, { path }) {
81.                 return html.replace(/"\/dist\/assets\//g, `"${relative(dirname(path), '/assets')}/`.replace(/\\/g, '/'))
82.             },
83.         },
84.         copy({
85.             targets: [
86.               { src: 'src/assets', dest: `dist/${mode()}` },
87.               { src: 'src/manifest.json', dest: `dist/${mode()}` },
88.               { src: 'src/_locales', dest: `dist/${mode()}` }
89.             ]
90.         }),
91.     ],

复制代码

      3、开发服务器设置

        这个模块主要是设置服务器相干的，设置请看代码（包罗了大部门设置，不是每个设置都需要开启，根据具体项目环境而定）：

1.   server: {
2.     // 更改服务器监听的主机名，使其在局域网内可访问
3.     host: '0.0.0.0',
4.    
5.     // 修改开发服务器的端口号
6.     port: 8080,
8.     // 是否在服务器启动时自动打开浏览器
9.     open: true,
11.     // 启用HTTPS服务，需要提供证书和私钥的路径
12.     https: {
13.       key: '/path/to/server.key',
14.       cert: '/path/to/server.crt',
15.     },
17.     // 跨源资源共享配置，允许所有源访问
18.     cors: true,
20.     // 配置代理，将 /api 开头的请求代理到 http://localhost:3001
21.     proxy: {
22.       '/api': {
23.         target: 'http://localhost:3001',
24.         changeOrigin: true,
25.         rewrite: (path) => path.replace(/^\/api/, ''),
26.       },
27.     },
29.     // 控制文件系统监视，忽略监视 node_modules 目录
30.     watch: {
31.       ignored: '**/node_modules',
32.     },
34.     // 当端口被占用时，不自动寻找下一个可用端口，而是直接报错
35.     strictPort: false,
37.     // 热模块替换，默认开启，可根据需要关闭
38.     hmr: true,
39.   },

复制代码

        4、打包设置

        这个主要是自己的打包build设置，一样平常会联合上面的插件一起使用，才能让build更便捷：
        以下也是常用的设置（实际根据具体项目而定）

1.   build: {
2.     // 输出目录，构建产物将存放在此目录下，默认为'dist'
3.     outDir: 'dist',
5.     // 构建前是否清空输出目录，默认为true
6.     emptyOutDir: true,
8.     // 指定构建目标的ECMAScript版本，影响代码的转译程度，默认为'es2020'
9.     target: 'es2020',
11.     // 构建时是否进行代码压缩，默认为true
12.     minify: true,
14.     // 当拆分的chunk大小超过此限制（单位：KB）时发出警告，默认为500KB
15.     chunkSizeWarningLimit: 500,
17.     // 构建后是否报告压缩后的文件大小，默认为true
18.     reportCompressedSize: true,
20.     // 传递给Rollup的额外配置选项
21.     rollupOptions: {
22.       // 输入配置，可以定义多个入口点
23.       input: {
24.         main: 'src/main.js', // 例如，主入口文件
25.         alternative: 'src/alternative-entry.js', // 另一个入口文件
26.       },
27.       // 输出配置，可以自定义输出格式、文件名等
28.       output: {
29.         // 例如，修改输出文件名
30.         entryFileNames: '[name].[hash].js',
31.       },
32.     },
34.     // 服务器端渲染相关配置
35.     ssr: {
36.       // SSR相关选项
37.     },
39.     // 小于该大小（单位：字节）的资源会被内联到bundle中，默认为4096字节
40.     assetsInlineLimit: 4096,
42.     // 指定CSS构建的目标浏览器支持等级，独立于'target'配置
43.     cssTarget: 'defaults',
45.     // 是否为模块preload/prefetch添加polyfill，默认为true
46.     polyfillModulePreload: true,
48.     // 配置如何处理CommonJS模块
49.     commonjsOptions: {
50.       // 例如，是否将混合模块转换为ESM
51.       transformMixedEsModules: true,
52.     },
54.     // 是否在构建时生成manifest文件，默认为true
55.     writeManifest: true,
56.   },

复制代码

完整设置如下：
由于偶然候需要分开打包，所以将公共部门抽离了：

1. import { defineConfig } from "vite";
2. import vue from "@vitejs/plugin-vue";
3. import { r, port, isDev, mode } from "./scripts/utils";
4. import { dirname, relative } from 'node:path'
5. import AutoImport from 'unplugin-auto-import/vite'
6. import copy from 'rollup-plugin-copy'
7. import viteImagemin from 'vite-plugin-imagemin'
8. import htmlMinifier from 'html-minifier';
9. import postcss from 'rollup-plugin-postcss';
10. import VitePluginDistZipJs from "vite-plugin-zip-dist";
13. export const sharedConfig = {
14.     root: r("src"),
15.     define: {
16.         '__DEV__': isDev,
17.         'process.env': process.env
18.     },
19.     resolve: {
20.         alias: {
21.             "@": r("src"),
22.             "~@": r("src"),
23.         },
24.         extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
25.     },
26.     esbuild:{
27.       drop: isDev ? [] : ["console", "debugger"]
28.     },
29.     plugins: [
30.         vue(),
31.         //Build zip
32.         mode() === 'development' ? null : VitePluginDistZipJs(
33.           {
34.             zipName: 'moolah-extension'  + '-' + '-' + mode() + '.' + process.env.VITE_VERSION,
35.             dayjsFormat: '',
36.             zipDir: r('dist'),
37.           }
38.         ),
39.         //compress css
40.        isDev ? null : postcss({
41.           plugins: [],
42.           extract: 'style.css',
43.           minimize: true,
44.         }),
45.         //compress html
46.         {
47.           name: 'html-minify',
48.           transformIndexHtml(html) {
49.             return htmlMinifier.minify(html, {
50.               collapseWhitespace: true, // 折叠空白符，将多余的空格和换行符折叠为一个空格
51.               removeComments: true,// 删除 HTML 中的注释
52.               minifyCSS: true,// 压缩内联 CSS
53.               minifyJS: true, // 压缩内联 JavaScript
54.               conservativeCollapse: true // 保守地折叠空白符，仅在标签之间的空格会被折叠，忽略元素内容中的空格
55.             });
56.           }
57.         },
58.         //compress Img
59.         viteImagemin({
60.           gifsicle: {
61.             optimizationLevel: 7,
62.             interlaced: false,
63.           },
64.           optipng: {
65.             optimizationLevel: 7,
66.           },
67.           mozjpeg: {
68.             quality: 20,
69.           },
70.           pngquant: {
71.             quality: [0.8, 0.9],
72.             speed: 4,
73.           },
74.           svgo: {
75.             plugins: [
76.               {
77.                 name: 'removeViewBox',
78.               },
79.               {
80.                 name: 'removeEmptyAttrs',
81.                 active: false,
82.               },
83.             ],
84.           },
85.         }),
87.         AutoImport({
88.             imports: [
89.                 "vue",
90.                 {
91.                     'webextension-polyfill': [
92.                         ['*', 'browser'],
93.                     ],
94.                 },
95.             ],
96.         }),
97.          // rewrite assets to use relative path
98.         {
99.             name: 'assets-rewrite',
100.             enforce: 'post',
101.             apply: 'build',
102.             transformIndexHtml(html, { path }) {
103.                 return html.replace(/"\/dist\/assets\//g, `"${relative(dirname(path), '/assets')}/`.replace(/\\/g, '/'))
104.             },
105.         },
106.         copy({
107.             targets: [
108.               { src: 'src/assets', dest: `dist/${mode()}` },
109.               { src: 'src/manifest.json', dest: `dist/${mode()}` },
110.               { src: 'src/_locales', dest: `dist/${mode()}` }
111.             ]
112.         }),
113.     ],
114. }
116. export default defineConfig(({ command }) => ({
117.     ...sharedConfig,
118.     server: {
119.       port,
120.       hmr: {
121.         host: 'localhost',
122.       },
123.     },
124.     build: {
125.         outDir: r(`dist/${mode()}`),
126.         emptyOutDir: false,
127.         rollupOptions: {
128.             input: {
129.                 options: r("src/options/index.html"),
130.                 popup: r("src/popup/index.html"),
131.             },
132.         },
133.         terserOptions: {
134.             mangle: false,
135.         },
136.         extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
137.     },
138. }));

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。