您现在的位置是:首页 >其他 >vite.config.js压缩图片配置网站首页其他

vite.config.js压缩图片配置

Stacey-TL 2024-09-04 00:01:02
简介vite.config.js压缩图片配置

import {
    defineConfig,
    loadEnv
} from 'vite'
import {
    resolve
} from 'path'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path' // 不引入@types/node依赖这里会报错
import AutoImport from 'unplugin-auto-import/vite'
import VueJSX from '@vitejs/plugin-vue-jsx'
import vue from '@vitejs/plugin-vue';

export const r = (...args) => resolve(__dirname, '.', ...args)
export default defineConfig(({
    command,
    mode
}) => {
    // const envConfig = loadEnv(mode, './')
    const alias = {
        '~': path.resolve(__dirname, './'), // 这个 __dirname 也不报错了 ************
        // 设置别名 这里的./指的是 vite.config.js 的所载目录(根目录)下面的 src
        // '@': path.resolve(__dirname, './src'),
        '@': path.resolve(__dirname, './src'),
        "@/images": "src/assets/images",
        "@/api": resolve(__dirname, "src/api"),
        "@/config": resolve(__dirname, "src/config"),
    }
    const root = process.cwd();
    const env = loadEnv(mode, root);
    return {
        resolve: {
            alias: alias,
            //extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
         build:{
             outDir: "dist",
            // assetsDir:"static",
            terserOptions: {
              // 生产环境移除console
              compress: {
                drop_console: true,
                drop_debugger: true,
              },
            },
            rollupOptions:{              
                // external: ['vue','nutui'], // 注意看这里
              input:{
                index:resolve(__dirname,"index.html"),
                // project:resolve(__dirname,"index.html")
              },
              output:{
                chunkFileNames:'static/js/[name]-[hash].js',
                entryFileNames:"static/js/[name]-[hash].js",
                assetFileNames:"static/[ext]/name-[hash].[ext]"
              }
            },
          },
        plugins: [
            uni(),
            // vue({
            //     script: {
            //         refTransform: true
            //     }
            // }),
            VueJSX(),
            AutoImport({
                imports: ['vue'],
                dirs: ['./src/utils/permission'],
                dts: r('src/auto-imports.d.ts')
            }),
            // uniReadPagesV3Plugin({
            //     pagesJsonDir: path.resolve(__dirname, './pages.json'),
            //     includes: ['path', 'aliasPath', 'name', 'meta'],
            // }),
        ],
        server: {
            port: 81,
            open: true, //vite项目启动时自动打开浏览器
            host: true,
            hmr: true, //开启热更新        
            disableHostCheck: true,
            proxy: {
                '/api': {
                    target:env.VITE_API_BASEURL,
                    changeOrigin: true,
                    rewrite: path => path.replace(/^/api/, '')
                }
            },
        },
        publicDir:'public',/*不需要被编译的静态资源目录,(打包图片)默认会把public的图片打包到h5的images里*/
        // base:'/',
        publicPath: '/',/*配置打包后的资源路径*/
        productionSourceMap: false,/*打包的时候不输出map文件,减少大量体积*/ 
        outputDir: 'dist',
        assetsDir: 'assets',
        /* 放置静态文件夹目录*/

        css: {
            preprocessorOptions: {
                scss: {
                    //   // 两种方式都可以
                    additionalData: '@import "@/assets/uni.scss";'
                    //   // additionalData: '@use "@/assets/scss/global.scss" as *;'
                }
                // less: {
                //     javascriptEnabled: true,
                //     additionalData: '@import "@/assets/uni.scss";'
                // }
            }
        }
    }
})
 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。