前言

我們?cè)诖罱╲ue3項(xiàng)目的時(shí)候不可避免的會(huì)遇到“代理”、“端口”、“打包名”、“圖片壓縮”等配置問(wèn)題，本文逐一講述該怎么樣在vite.config.js中去配置。

一、配置代理端口和代理轉(zhuǎn)發(fā)

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

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080, // 端口
        proxy: {
            '/api': { // 請(qǐng)求接口中要替換的標(biāo)識(shí)
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允許跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '') // api標(biāo)志替換為''
            }
        }
    },
    plugins: [vue()]
})

二、修改打包名

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

export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: 'distBigScreenBase' // 打包文件的輸出目錄
    }
})

三、使用@

vite.config.ts添加如下代碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    }
})

ts.config.json添加如下代碼

{
    "compilerOptions": {
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

四、圖片壓縮

圖片壓縮先要引入vite-plugin-imagemin插件

命令：npm i vite-plugin-imagemin -D

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

export default defineConfig({
    plugins: [vue(),
        // 圖片壓縮
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        })
    ]
})

五、完整代碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
    server: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': { // 請(qǐng)求接口中要替換的標(biāo)識(shí)
                target: 'http://117.62.22.235:17009', // 代理地址
                changeOrigin: true, // 是否允許跨域
                secure: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    plugins: [vue(),
        // 圖片壓縮
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        })
    ],
    build: {
        outDir: 'distBigScreenBase' // 打包文件的輸出目錄
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    }
})

總結(jié)

vue3的配置和vue2有所不同，不能照搬照套vue2，那樣會(huì)報(bào)錯(cuò)。代碼可以直接copy，親測(cè)有效，只需要修改成自己想要的文件名、路徑即可。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-722362.html

到了這里，關(guān)于vue3項(xiàng)目vite.config.js配置“代理”、“端口”、“打包名”、“圖片壓縮”的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！