vite.config.js和postcss.config.js配置项的部分解释说明

1.我们的vue项目包管理工具从webpack转向vite后，相关config.js的配置也有一定的变化，以下是vite.config.js的部分配置和注释。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import path from 'path'
export default defineConfig({
    publicPath: '/', // 用于指定在构建时生成的静态资源的基本 URL 路径。这里设置为 '/' 表示根路径，即所有静态资源的 URL 都以根路径开始。
    outputDir: 'dist', //用于指定构建输出的目录，默认为 dist，即构建后的文件将输出到项目根目录下的 dist 文件夹。
    server: {
        host: '0.0.0.0', //指定开发服务器监听的主机地址。这里设置为 '0.0.0.0' 表示允许通过局域网的 IP 地址访问开发服务器，可以在局域网内其它设备访问你的开发页面。
        proxy: {
            '/SDEnt': {
                target: 'http://192.xxx.8.xxx:8083',
                changeOrigin: true,
            },
            '/SD': {
                target: 'http://192.xxx.8.xxx:8083',
                changeOrigin: true,
            }, //用于设置代理配置，解决前端请求跨域问题。在本示例中，所有以 /SDEnt 开头的请求将被代理到 http://192.168.8.224:8083，所有以 /SD 开头的请求将被代理到同样的地址。
        },
    },
    plugins: [vue()], // 这里使用了 @vitejs/plugin-vue2 插件，用于支持 Vue 2.x 的编译与热更新。
    transpileDependencies: true, //用于指定是否对依赖进行转译。在这里设置为 true，表示会对依赖进行转译，这在某些第三方库或模块使用 ES6+ 语法时可能会有用。
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'), //别名配置，这里将 @ 设置为项目根目录下 src 文件夹的绝对路径。这样在代码中可以使用 @ 代替 'src' 目录的路径，方便引入模块。
        },
    },
})

附vite官方文档：cn.vitejs.dev/config/

2.在 Vue 项目中，postcss.config.js 文件用于配置 PostCSS 插件的选项。PostCSS 是一个用于转换 CSS 的工具，它支持使用各种插件来处理 CSS 文件。

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 75, //这是 postcss-pxtorem 插件的一个配置选项，用于指定根元素的字体大小（root font size）。在移动端适配中，通常将根元素的字体大小设置为设计稿宽度的百分之一，这里设置为 75，表示根元素的字体大小为 75px。
            propList: ['*'], // 用于指定需要转换的 CSS 属性列表。在这里设置为 ['*']，表示转换所有属性的像素单位为 rem 单位。
            exclude: /node_modules/, //这是一个正则表达式，用于指定哪些文件或目录不需要进行转换。在这里设置为 /node_modules/，表示不对位于 node_modules 目录下的 CSS 文件进行转换，因为一般来说，第三方库的 CSS 应该不需要转换。
        },
    },
}

附postcss文档：github.com/postcss/pos… 参考文章：zhuanlan.zhihu.com/p/546832953…