vite使用记录

1. 搭建项目

使用 NPM:

npm create vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

构建一个 Vite + Vue 项目

# npm 6.x
npm create vite@latest my-vue-app --template vue
 
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
 
# yarn
yarn create vite my-vue-app --template vue
 
# pnpm
pnpm create vite my-vue-app --template vue

2. 基础配置

官方文档地址

import { defineConfig } from "vite";
export default defineConfig({
  // 配置选项
});

3. 共享配置

• 配置别名路径

import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
});

• 图片便捷路径

import { defineConfig } from "vite";
export default defineConfig({
  resolve: {
    alias: [
      {
        find: "/img",
        replacement: "src/assets/images/",
      },
    ],
  },
});
 
// 使用
<img src="/img/xx.png" alt="xx" />

4. 开发服务器配置

export default defineConfig({
  server: {
    host: true, // 服务器监听 IP 地址
    port: 8080, // 服务器端口
    hmr: true, // 热更新
    open: true, // 项目启动自动打开浏览器
    // 代理规则
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
});

5. 构建配置

• 打包后按类型分文件夹

import { defineConfig } from "vite";
import {resolve} from "path";
export default defineConfig({
  build:{
    assetsDir:"static",
    rollupOptions:{
      input:{
        index:resolve(__dirname,"index.html")
      },
      output:{
        chunkFileNames:'static/js/[name]-[hash].js',
        entryFileNames:"static/js/[name]-[hash].js",
        assetFileNames:"static/[ext]/name-[hash].[ext]"
      }
    },
  },
});

6. 配置多环境

根目录下分别新建.env.development,.env.staging,.env.production文件

//.env.development
NODE_ENV="development"
VITE_APP_BASEAPI="https://www.dev.com"
 
//.env.staging
NODE_ENV="staging"
VITE_APP_BASEAPI="https://www.staging.com"
 
//.env.production
NODE_ENV="production"
VITE_APP_BASEAPI="https://www.production.com"

package.json中修改

 "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "staging": "vite build --mode staging",
    "preview": "vite preview"
 },

项目中获取

<script setup>
    console.log("env", import.meta.env.VITE_APP_BASEAPI)
</script>

7. 配置多页面，多入口

import { defineConfig } from "vite";
import {resolve} from "path";
export default defineConfig({
  build:{
    assetsDir:"static",
    rollupOptions:{
      input:{
        index:resolve(__dirname,"index.html"),
        project:resolve(__dirname,"project.html")
      },
    },
  },
});

8. 打包文件分析

安装 rollup-plugin-visualizer 插件

npm i rollup-plugin-visualizer

import { defineConfig } from "vite";
import {visualizer} from "rollup-plugin-visualizer"
export default defineConfig({
  plugins: [
    visualizer({
      open:true,  //注意这里要设置为true，否则无效
      gzipSize:true,
      brotliSize:true
    })
  ]
});

9. 问题

require is not defined

// 报错
require('./images/xx.png')
// 修改成
new URL('./images/xx.png',import.meta.url).href