1. Vite的優化配置

目錄

base

別名

打包壓縮代碼

生產環境下清空console.log

打包出的文件整理

創建一個 Vite 構建的 Vue-TS 項目

npm create vite@latest my-vue-app -- --template vue

2. base

這個是給每個資源，設置一個跟路徑，這個是在生產環境下才會由效果的。這個可以解決在項目部署時，有些資源訪問不到的問題。

我們看到，這個 img 的路徑是 /src/assets/logo.png 的。
這個會有一個問題，就是在部署之后會發送訪問不到的情況，這時我們用 base 為其添加公共的路徑就可以解決這個問題。
vite.config.ts

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/ export default defineConfig({base: './',plugins: [vue()] })

效果為

2. 別名

什么是別名？就是我們在引入一些文件時，有時會一段很長的路徑。很麻煩，有時還會拼寫錯誤，這時用別名就可以省略一段公共路徑

import routlist from '../../components/routerList/index.vue';

以這個為例子，我們 components 是一個放置公共組件的文件，但是每次需要訪問這個目錄下的 文件時需要添加一段很長的路徑。

import routlist from '@/routerList/index.vue';

改成上面的這樣就好看多了，那么vite.config.ts里怎么配置呢？
vite.config.ts

在配置時，我們會用到 node.js 的 path 核心模塊，但是 Typescript 會報錯

這個是因為TS，沒有識別 Node.js的類型，我們只需要在 tsconfig.json這個文件中添加 TS 的類型即可

npm i @types/node -S

下載這個 @types/node 這個包
tsconfig.json文件

{"compilerOptions": {"type": ["@type/node"]} }

就可以了

這時 vite.config.ts 里用到的 node的內容就不會報錯了

這時我們引入組件就可以使用 別名了

對應圖片的路徑 別名

'/&': './src/assets/' // 這個圖片的別名

只能是這樣

<img alt="Vue logo" src="/&/logo.png" />

3. 打包代碼壓縮

需要下載 vite-plugin-compression 這個插件

npm i vite-plugin-compression -D

vite.config.ts

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path'; import viteCompression from 'vite-plugin-compression'; // https://vitejs.dev/config/ export default defineConfig({base: './',resolve: {alias: {'@': resolve(__dirname, 'src/components'),'/&': './src/assets/'}},plugins: [vue(),viteCompression({//生成壓縮包gzverbose: true, // 輸出壓縮成功disable: false, // 是否禁用threshold: 1, // 體積大于閾值會被壓縮，單位是balgorithm: 'gzip', // 壓縮算法ext: '.gz',// 生成的壓縮包后綴}),] })

4. 生產環境下清空console.log

vite.config.js

build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}} }

5. 打包出的文件整理

build: {rollupOptions: {output: {chunkFileNames: 'js/[name]-[hash].js',entryFileNames: 'js/[name]-[hash].js',assetFileNames: '[ext]/[name]-[hash].[ext]'}} }

全部的vite.config.ts

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path'; import viteCompression from 'vite-plugin-compression'; // https://vitejs.dev/config/ export default defineConfig({base: './',resolve: {alias: {'@': resolve(__dirname, 'src/components'),'/&': './src/assets/'}},plugins: [vue(),viteCompression({//生成壓縮包gzverbose: true, // 輸出壓縮成功disable: false, // 是否禁用threshold: 1, // 體積大于閾值會被壓縮，單位是balgorithm: 'gzip', // 壓縮算法ext: '.gz',// 生成的壓縮包后綴}),],build: {rollupOptions: {output: {chunkFileNames: 'js/[name]-[hash].js',entryFileNames: 'js/[name]-[hash].js',assetFileNames: '[ext]/[name]-[hash].[ext]'}}} })

總結

以上是生活随笔為你收集整理的Vite的优化配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。