1. base 配置打包公共路径

// vite.config.ts 演示地址 http://www.weihua.com:51000/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', // 采用hash路由，并且不放在nginx根目录形式需要配置
  plugins: [vue()]
})

为防止部署项目时发生资源路径访问错误的隐患，这里配置相对路径来避免发生。

2. alias配置图片地址别名

ts需要安装@types/node才能识别到node_modules文件夹下的模块

yarn add @types/node

在vite.config.ts 文件中，设置别名配置：

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

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components')
    }
  },
  plugins: [vue()]
})

测试配置是否生效：

// App.vue
<script setup lang="ts">
import HelloWorld from '@components/HelloWorld.vue'
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

网页组件正常加载，说明别名配置成功

3. 构建生产版本移除log打印

// vite.config.ts
export default defineConfig({
  ...
  build: {
    minify: 'terser', // 默认为esbuild
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true // 生产环境移除debugger
      }
    }
  },
  ...
})

4. 打包输出文件夹配置

// vite.config.ts
...
export default defineConfig({
  build: {
    ...
    rollupOptions: {
      output: {
        manualChunks(id) {
            // node_modules 下文件分包
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        chunkFileNames: "vendors/[name]-[hash].js", // 三方库文件
        entryFileNames: "js/[name]-[hash].js", // entry js文件
        assetFileNames: "[ext]/[name]-[hash].[ext]", // css文件
      },
    }
  },
  ...
})

5. 配置开发环境和生产环境变量

在根目录创建两个文件.env.development(开发环境配置文件）和.env.production(生产环境配置文件）

// .env.development
VITE_BASE_API = '/api'

// .env.production
VITE_BASE_API = 'https://product.weihua.cn/'

在App.vue中修改请求地址：

<script setup lang="ts">
import HelloWorld from '@comp/HelloWorld.vue'
import axios from 'axios'
async function fn() {
  const { data } = await axios.get(import.meta.env.VITE_BASE_API as string)
  console.log(data)
}
fn()
</script>

6. CDN 引入

安装模块:

yarn add vite-plugin-cdn-import -D

修改vite.config.ts 文件

...
// 引入CDN插件
import importToCDN from 'vite-plugin-cdn-import'
...

export default defineConfig({
  ...
  plugins: [
    ...
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://cdn.staticfile.org/vue/3.2.36/vue.global.prod.min.js'
        },
        {
          name: "element-plus",
          var: "ElementPlus",
          path: "https://cdn.staticfile.org/element-plus/2.2.8/index.full.min.js",
          css: "https://cdn.staticfile.org/element-plus/2.2.8/index.min.css",
        }
      ]
    })
  ],
})

修改main.ts 文件：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
// css不需要引入
createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

CDN引入与自动引入插件做对比：

esbuild文件更小，例如：element-plus，vue

CDN是全局引入，文件较大但是可以可以CDN加速。生产环境版本一致。（同时也是GZIP压缩）

7. GZIP压缩

nginx配置gzip压缩，静态资源会被自动压缩。不需要所谓的插件，vite-plugin-compression compression-webpack-plugin

blog.csdn.net/sun1613/art…

#Gzip module
    gzip  on;
    gzip_disable "MSIE [1-6].";
    gzip_min_length 1k;
    gzip_http_version 1.1;
    gzip_types text/css text/xml application/javascript;

8.疑问：

如何实现页面的预加载 prefetch。欢迎小伙伴评论区教教我。

Vite常用配置