vite使用

vite 简易使用指南

vite

vite 的基本使用

使用 vite 创建项目

使用 pnpm

1	pnpm create vite

使用官方的模版

1	pnpm create vite vite-program -- --template vue-ts

生成好项目后你可以看到项目中有一个 vite.config.ts的文件，在这里我们可以进行一系列的配置

配置路径别名

安装类型声明文件

1	pnpm i -D @type/node

将 @ 指向 src 文件

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

import path from "path"

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

配置代理

export default defineConfig({
  server: {
    proxy: {
      // string shorthand
      "/foo": "http://localhost:4567",
      // with options
      "/api": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      // with RegEx
      "^/fallback/.*": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ""),
      },
      // Using the proxy instance
      "/api": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy'
        },
      },
      // Proxying websockets or socket.io
      "/socket.io": {
        target: "ws://localhost:3000",
        ws: true,
      },
    },
  },
})

配置项目端口及自动启动

export default defineConfig({
  server: {
    port: 3030, // 服务启动端口
    open: true, // 服务启动自动打开默认浏览器
  },
})

配置插件

在 Vue.js 中写 Jsx

1	pnpm i -D @vitejs/plugin-vue-jsx

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()],
})

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。