temporary-parking-frontend/vite.config.js

// const { fileURLToPath, URL } = require('node:url');
const { defineConfig } = require('vite');
// const vue = require('@vitejs/plugin-vue');
const vue = require('@vitejs/plugin-vue');
// const vueDevTools = require('vite-plugin-vue-devtools');
// const { terser } = require('rollup-plugin-terser');
// const commonjs = require('@rollup/plugin-commonjs');
// const {resolve, join} = require("node:path");
const path = require("node:path");
const fs = require("node:fs");
// const viteCompression = require("vite-plugin-compression");
const {visualizer} = require("rollup-plugin-visualizer");
import vitePluginStyleVwLoader from "vite-plugin-style-vw-loader";
// const __PROD__ = process.env.NODE_ENV === 'production';
import postcsspxtoviewport from 'postcss-px-to-viewport-8-plugin'
import {
  publicPath,
  REGEX_IMG,
  REGEX_FONT,
  DIR_ASSET,
  DIR_IMG,
  DIR_FONTS,
} from './build-util';
module.exports = defineConfig({
  // root: './public',
  // base: publicPath || '/tparking/',
  base: '/tparking/',
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/kui/theme/theme.less"; @import "@/styles/uni.less"; @import "@/styles/common.less";`,
      },
      scss: {
        additionalData: `$injectedColor: orange;` // 如果你需要全局注入一些 SCSS 变量
      }
    },
  },
  plugins: [
    vitePluginStyleVwLoader({
      unitToConvert: "px", // The unit to be converted is "px" by default.
      viewportWidth: 750, // The viewport width of the design draft, such as the incoming function, whose parameter is the file path currently processed.
      unitPrecision: 5, // Precision retained after unit conversion.
      viewportUnit: "vw", // Viewport units you want to use.
      fontViewportUnit: "vw", // Viewport units used by fonts.
      minPixelValue: 1, // Set the minimum conversion value. If it is 1, only values greater than 1 will be converted.
    }),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'wx-open-launch-weapp'
        }
      }
    }),
    // 开启gzip
    // viteCompression(),
    visualizer({ open: process.env.NODE_ENV === 'development' }), // 自动开启分析页面
  ],
  build: {
    // sourcemap: false, // 禁用源映射
    sourcemap: process.env.NODE_ENV === 'development',
    assetsDir: 'static',
    assetsInlineLimit: 4096, // 小于4kb的图片会被转为base64，内联在代码中
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: ({name}) => {
          if (name === undefined || name === null) {
            name = '';
          }
          if (REGEX_IMG.test(name)) {
            return `${DIR_ASSET}/${DIR_IMG}/[name].[hash][extname]`;
          }
          if (/\.css$/.test(name)) {
            return DIR_ASSET + '/css/[name].[hash][extname]';
          }
          if (REGEX_FONT.test(name)) {
            return `${DIR_ASSET}/${DIR_FONTS}/[name].[hash][extname]`;
          }
          // 其他文件保持默认的输出路径
          return `${DIR_ASSET}/[name]-[hash][extname]`;
        }
      }
    },
    // 配置生产环境中的资源引用路径
    base: publicPath || '/tparking/'
  },
  experimental: {
    // https://vitejs.cn/vite3-cn/config/shared-options.html#base  控制 html 所在位置
    // https://vitejs.cn/vite3-cn/guide/build.html#advanced-base-options 控制 assets 和 public 放在哪里
    renderBuiltUrl(filename, options) {
      /**
       * @param {string} filename
       * @param {Object} options
       * @param {string} options.hostId
       * @param {'js' | 'css' | 'html'} options.hostType
       * @param {'public' | 'asset'} options.type
       */
      const { hostId, hostType, type } = options;
      return publicPath + '/' + filename;
      // return 'https://aliyun.dc1979.com/img/h5/' + filename
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 8080,
    host: '127.0.0.1',
    strictPort: true,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ["**/src-tauri/**", "**/node_modules/**"],
    },
  },
});