配置vite.config.ts/vite.config.js文件

跟着官方，以及一些社区资料，记录一下哈

初始化文件是这样的

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

然后配置成这样

如果process.cwd()飘红，那就安装一下npm i --save-dev @types/node

注意，如果打包报错，是因为我这里装了一些插件引入

import { defineConfig, loadEnv } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 路径
const pathResolve = (dir: string): any => {
  return resolve(__dirname, '.', dir);
}
// 配置快捷路径
const alias: Record = {
  '/@': pathResolve('./src/'),
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode}) => {
  const env = loadEnv(mode, process.cwd(), 'ENV')
  return {
    plugins: [vue()],
    root: process.cwd(), // 项目根目录
    base: command === 'serve' ? './' : env.VITE_PUBLIC_PATH, // 基础路径
    resolve: { alias },
    // 配置服务
    server: {
      host: '0.0.0.0', // 监听ip
      port: env.VITE_PORT as unknown as number, // 端口号
      open: env.VITE_OPEN, // 启动时自动在浏览器中打开
      proxy: {
        '/v1': {
          target: 'http://192.168.0.118:8888',
          ws: true, // 是否启用websockets
          changeOrigin: true, // 运行跨域
          // rewrite: (path) => path.replace(/^\/v1/, ''), // 重写路径
        },
      },
    },
    // 配置打包
    build: {
      outDir: 'dist', // 相对根目录下的路径
      sourcemap: false, // 是否生成源map
      chunkSizeWarningLimit: 1500, // 触发chunk警告大小
      rollupOptions: {
        output: { // 输出文件  https://rollupjs.org/guide/en/#big-list-of-options
          entryFileNames: `assets/js/[name]-entry-[hash].${new Date().getTime()}.js`, // 用于从入口点创建的块的模式
          chunkFileNames: `assets/js/[name]-chunk-[hash].${new Date().getTime()}.js`, // 用于命名代码拆分时创建的共享块的模式
          assetFileNames: `assets/[ext]/[name]-asset-[hash].${new Date().getTime()}.[ext]`, // 用于命名自定义发射资产以包含在构建输出中的模式
          compact: true, // 这将缩小汇总生成的包装器代码。请注意，这不会影响用户编写的代码。此选项在捆绑预压缩代码时很有用
          manualChunks: { // 创建自定义共享公共块
            vue: ['vue', 'vue-router', 'vuex']
          },
        },
      },
      terserOptions: { // https://terser.org/docs/api-reference#minify-options
        compress: { // 自定义压缩
          drop_console: true, // 删除console.*的代码
          drop_debugger: true, // 删除断点
        },
        ie8: true, // 支持ie8
        output: { // 输出代码格式
          comments: true, // 保留所有注释
        },
      },
    },
    // 配置css
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              },
            },
          },
          postCssPxToRem({
            rootValue: 37.5, // 1rem 的大小
            propList: ['*'], // 需要转换的属性，*(全部转换)
            unitPrecision: 6 // 转换精度，保留的小数位数
          })
        ],
      },
    },
  }

})